JavaScript隐藏/显示元素

Question

按下它后,我怎么能隐藏'编辑'链接？当我按下编辑时,我还可以隐藏"lorem ipsum"文本吗？

<script type="text/javascript">
function showStuff(id) {
  document.getElementById(id).style.display = 'block';
}
</script>


<td class="post">

  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span id="answer1" style="display: none;">
    <textarea rows="10" cols="115"></textarea>
  </span>

  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
</td>

Answer 1

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

Answer 2

您还可以使用此代码来显示/隐藏元素:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

注意style.visibility和之间的区别在于style.display使用可见性:隐藏与display:none不同,标记不可见,但在页面上为其分配了空间.标记已呈现,它只是在页面上看不到.

请参阅此链接以查看差异.

Answer 3

我想建议你使用JQuery选项.

$("#item").toggle();
$("#item").hide();
$("#item").show();

例如:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Answer 4

我建议隐藏元素(正如其他人所建议的那样):

document.getElementById(id).style.display = 'none';

但为了使元素可见,我建议这(而不是display ='block'):

document.getElementById(id).style.display = '';

其原因是,使用显示="块"是造成额外的裕量/空白旁边的元件在IE(11)和铬(版本43.0.2357.130米)我工作在页面上被可见.

首次在Chrome中加载页面时,DOM检查器中将显示没有样式属性的元素:

element.style {
}

使用标准JavaScript隐藏它就像预期的那样:

element.style {
  display: none;
}

使用display ='block'再次显示它会将其更改为:

element.style {
  display: block;
}

这跟原来的不一样.在大多数情况下,这很可能没有任何区别.但在某些情况下,它确实会引入异常.

使用display =''会在DOM检查器中将其恢复到原始状态,因此它似乎是更好的方法.

Answer 5

你可以使用元素的隐藏属性:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

Answer 6

您应该尽可能地考虑JS的行为,以及CSS的视觉糖果.通过更改您的HTML:

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

只需使用CSS规则,您就可以从一个视图切换到另一个视图:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

和JS代码在两个类之间切换

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Answer 7

虽然之前已经多次回答过这个问题,但我认为我会为未来的用户提供更完整,更可靠的答案.主要答案确实解决了这个问题,但我相信知道/理解一些显示/隐藏事物的方法可能会更好.

.

使用css()更改显示

这是我以前的方式,直到我发现其他一些方式.

使用Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

优点:

• 隐藏和取消隐藏.就是这样.

缺点:

• 如果您将"display"属性用于其他内容,则必须对隐藏之前的值进行硬编码.因此,如果您有"内联",则必须执行$("#element_to_hid").css("display", "inline");其他操作,否则它将默认返回"阻止"或其他任何将被强制插入的内容.
• 适合拼写错误.

示例:https: //jsfiddle.net/4chd6e5r/1/

.

使用addClass()/ removeClass()更改显示

在为这个设置示例时,我实际上遇到了一些关于这种方法的缺陷,这使得它非常不可靠.

CSS/JavaScript的:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

优点:

• 它隐藏....有时候.请参阅示例中的p1.
• 取消隐藏后,它将返回使用之前的显示值....有时.请参阅示例中的p1.
• 如果你想抓住所有隐藏的物体,你只需要做$(".hidden").

缺点:

• 如果直接在html上设置显示值,则不隐藏.请参阅示例中的p2.
• 如果使用css()在javascript中设置显示,则不隐藏.请参阅示例中的p3.
• 稍微多一些代码,因为你必须定义一个css属性.

示例:https://jsfiddle.net/476oha8t/8/

.

使用toggle()更改显示

使用Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

优点:

• 永远有效.
• 允许您不必担心切换之前的状态.显而易见的用于....切换按钮.
• 简短而简单.

缺点:

• 如果您需要知道它切换到哪个状态以执行不直接相关的操作,则必须添加更多代码(if语句)以找出它所处的状态.
• 与前面的con类似,如果你想运行一组包含toggle()的指令以便隐藏,但你不知道它是否已经被隐藏,你必须添加一个check(if语句)首先找出它,如果已经隐藏,那么跳过.请参阅示例的第1页.
• 与之前的2个缺点相关,对于特定隐藏或特定显示的内容使用toggle(),可能会让其他人阅读您的代码时感到困惑,因为他们不知道切换的方式.

示例:https://jsfiddle.net/cxcawkyk/1/

.

使用hide()/ show()更改显示

使用Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

优点:

• 永远有效.
• 取消隐藏后,它将返回使用之前的显示值.
• 您将始终知道您正在交换哪个州,以便您:
  1. 如果状态重要,则不需要在更改状态之前添加if语句来检查可见性.
  2. 如果国家重要的话,不会混淆其他人阅读你的代码,因为你要转换到哪个州.
• 直观.

缺点:

• 如果要模仿切换,则必须首先检查状态,然后切换到其他状态.使用toggle()代替这些.请参阅示例的第2页.

示例:https://jsfiddle.net/k0ukhmfL/

.

总的来说,我会说最好是hide()/ show()除非你特别需要它作为切换.我希望您发现此信息有用.

Answer 8

只需为所有元素自己创建隐藏和显示方法,如下所示

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

在此之后,您可以将这些方法与通常的元素标识符一起使用,如下例所示:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

要么:

<img src="removeME.png" onclick="this.hide()">

Answer 9

如果您在表格中使用它，请使用以下命令：-

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

Answer 10

用于类和 ID 的 Vanilla JS

通过身份证

document.querySelector('#element-id').style.display = 'none';

按类（单个元素）

document.querySelector('.element-class-name').style.display = 'none';

按类（多个元素）

for (const elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}

Answer 11

我推荐Javascript,因为它相对快速且更具有可塑性.

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>