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的区别在于使用visibility:hidden 时与display:none 不同，标签不可见，但在页面上为其分配了空间。 标签被渲染，它只是在页面上看不到。

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

Answer 3

我建议这样做来隐藏元素（正如其他人所建议的那样）：

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

但是为了使元素可见，我建议这样做（而不是 display = 'block'）：

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

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

当你第一次在 Chrome 中加载页面时，没有 style 属性的元素会在 DOM 检查器中显示如下：

element.style {
}

正如预期的那样，使用标准 JavaScript 将其隐藏起来：

element.style {
  display: none;
}

使用 display = 'block' 使其再次可见将其更改为：

element.style {
  display: block;
}

这和原来的不一样。 在大多数情况下，这很可能不会产生任何影响。 但在某些情况下，它确实会引入异常。

在 DOM 检查器中使用 display = '' 确实将其恢复为原来的 state，所以这似乎是更好的方法。

Answer 4

我想向您推荐JQuery选项。

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

例如：

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

Answer 5

您可以使用元素的隐藏属性：

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

Answer 6

用于类和 ID 的 Vanilla JS

按 ID

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

By Class (单元件)

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

By Class（多个元素）

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

Answer 7

您应该尽可能将 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 8

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

.

使用 css() 更改显示

在我找到其他一些方法之前，我一直都是这样做的。

Javascript：

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

优点：

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

缺点：

• 如果您将“显示”属性用于其他内容，则必须对隐藏之前的值进行硬编码。 因此，如果您有“内联”，则必须执行$("#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

优点：

• 总是有效。
• 让您不必担心在切换之前它是哪个 state。 明显的用途是用于一个....切换按钮。
• 简短而简单。

缺点：

• 如果您需要知道它正在切换到哪个 state 以执行不直接相关的操作，则必须添加更多代码（if 语句）以找出它在哪个 state 中。
• 和前面的骗局类似，如果你想运行一组包含toggle()的指令以达到隐藏的目的，但你不知道它是否已经隐藏，你必须添加一个检查（一个if语句）首先找出它是否已经隐藏，然后跳过。 请参阅示例的 p1。
• 与前 2 个缺点相关，将 toggle() 用于特别隐藏或特别显示的内容，可能会使阅读您的代码的其他人感到困惑，因为他们不知道他们将以哪种方式切换。

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

.

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

Javascript：

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

优点：

• 总是有效。
• 取消隐藏后，它将返回使用之前的显示值。
• 您将始终知道要交换到哪个 state，因此您：
  1. 如果 state 很重要，则无需添加 if 语句以在更改状态之前检查可见性。
  2. 如果 state 很重要，那么阅读您的代码的其他人不会混淆您正在切换到哪个 state。
• 直觉的。

缺点：

• 如果你想模仿一个拨动开关，你必须先检查 state，然后再切换到另一个 state。 使用 toggle() 代替这些。 请参阅示例的 p2。

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

.

总的来说，我会说最好是 hide()/show() 除非你特别需要它作为切换。 我希望您发现此信息对您有所帮助。

Answer 9

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

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 10

我推荐 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 11

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

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

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <button onclick="myFunction()">Click Me</button> <div id="myDIV"> This is my DIV element. </div>

Answer 13

document.getElementById("an_id").hidden = true;

Answer 14

2022 ― 极简主义的方式

•特权：避免更改任何会使代码丑化的style属性。

const hideElement = (e, ok) => e.setAttribute('hidden', !!ok);

[hidden="true"] { display: none }

• 显示️

   hideElement(myElement, false);

• 隐藏

  hideElement(myElement, true);

祝你好运