用于类和ID的Vanilla JS

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之间的区别是使用visibility时隐藏：隐藏不像display：none，标签不可见，但在页面上为它分配空间。标记已呈现，只是在页面上看不到。

请参阅此link以查看差异。

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 = '';

原因是使用display ='block'会导致在我正在处理的页面上IE（11）和Chrome（版本43.0.2357.130 m）中可见元素旁边的额外边距/空白。

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

element.style {
}

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

element.style {
  display: none;
}

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

element.style {
  display: block;
}

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

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

Answer 5

你应该尽可能地考虑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 6

你可以使用element的隐藏属性：

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

Answer 7

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

使用css（）

更改显示

这是我以前的方式，直到我找到其他一些方法。

使用Javascript：

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

优点：

隐藏和取消隐藏。那是关于它的。

缺点：

如果您使用＆＃34;显示＆＃34;属于其他东西，你必须硬编码隐藏之前的值。因此，如果您有＃34;内联＆＃34;，则必须执行$("#element_to_hid").css("display", "inline");否则它将默认返回＆＃34;阻止＆＃34;或者其他任何被迫进入的地方。
适合拼写错误。

示例：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上设置显示值，则不隐藏。请参阅示例中的第2页。
如果使用css（）在javascript中设置显示，则不隐藏。请参阅示例中的第3页。
稍微多一些代码，因为你必须定义一个css属性。

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

使用toggle（）

更改显示

使用Javascript：

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

优点：

始终有效。
允许您不必担心切换前的状态。显而易见的用于....切换按钮。
简短而简单。

缺点：

如果您需要知道它切换到哪个状态以执行不直接相关的操作，则必须添加更多代码（if语句）以找出它所处的状态。
与之前的con类似，如果你想运行一组包含toggle（）的指令以便隐藏，但你不知道它是否已经隐藏，你必须添加一个检查（if语句）首先找出它，如果它已经被隐藏，那么跳过。请参阅示例的第1页。
与前两个缺点相关，对于特定隐藏或专门显示的内容使用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

我推荐使用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>

Answer 10

如果您在表中使用它，请使用： -

  <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 11

用于类和ID的Vanilla JS

通过ID

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

按类别（单个元素）

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

按类别（多个元素）

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

JavaScript隐藏/显示元素

11 个答案:

使用css（）

使用addClass（）/ removeClass（）

使用toggle（）

使用hide（）/ show（）

用于类和ID的Vanilla JS