JavaScript 隐藏/显示元素

JavaScript hide/show element

提问by nortaga

How could I hide the 'Edit'-link after I press it? and also can I hide the "lorem ipsum" text when I press edit?

按下后如何隐藏“编辑”链接？当我按编辑时，我还可以隐藏“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>

回答by Sascha Galley

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>

回答by A-Sharabiani

You can also use this code to show/hide elements:

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

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

NoteThe difference between style.visibilityand style.displayis when using visibility:hidden unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

注意style.visibility和之间的区别在于，style.display当使用visibility:hidden 与display:none 不同时，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

See this linkto see the differences.

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

回答by Mc-

I would like to suggest you the JQueryoption.

我想向您推荐JQuery选项。

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

For example:

例如：

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

回答by Ben Osborne

I would suggest this to hide elements (as others have suggested):

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

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

But to make elements visible, I'd suggest this (instead of display = 'block'):

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

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

The reason is that using display = 'block' is causing additional margin/whitespace next to the element being made visible in both IE (11) and Chrome (Version 43.0.2357.130 m) on the page I'm working on.

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

When you first load a page in Chrome, an element without a style attribute will appear like this in the DOM inspector:

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

element.style {
}

Hiding it using the standard JavaScript makes it this, as expected:

正如预期的那样，使用标准 JavaScript 隐藏它使它成为这样：

element.style {
  display: none;
}

Making it visible again using display = 'block' changes it to this:

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

element.style {
  display: block;
}

Which is not the same as it originally was. This could very well not make any difference in the majority of cases. But in some cases, it does introduce abnormalities.

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

Using display = '' does restore it to its original state in the DOM inspector, so it seems like the better approach.

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

回答by nabeghe

you can use hidden property of element:

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

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

回答by sitifensys

You should think JS for behaviour, and CSS for visual candy as much as possible. By changing your HTML a bit :

你应该尽可能地将 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>

You'll be able to switch from one view to the other simply using CSS rules :

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

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

And JS code that switch between the two classes

以及在两个类之间切换的JS代码

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

回答by Macainian

Though this question has been answered many times before, I thought I would add to it with a more complete and solid answer for future users. The main answer does solve the problem, but I believe it may be better to know/understand the some of various ways to show/hide things.

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

.

.

Changing display using css()

使用 css() 更改显示

This is the way I used to do it until I found some of these other ways.

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

Javascript:

Javascript：

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

Pros:

优点：

• Hides and unhides. That's about it.

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

Cons:

缺点：

• If you use the "display" attribute for something else, you will have to hardcode the value of what it was prior to hiding. So if you had "inline", you would have to do $("#element_to_hid").css("display", "inline");otherwise it will default back to "block" or whatever else that it will be forced into.
• Lends itself to typos.

• 如果您将“显示”属性用于其他用途，则必须对其隐藏之前的值进行硬编码。因此，如果您有“内联”，则必须这样做，$("#element_to_hid").css("display", "inline");否则它将默认返回“阻止”或其他任何强制执行的操作。
• 容易出现错别字。

Example: https://jsfiddle.net/4chd6e5r/1/

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

.

.

Changing display using addClass()/removeClass()

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

While setting up the example for this one, I actually ran into some flaws on this method that make it very very unreliable.

在为此设置示例时，我实际上遇到了这种方法的一些缺陷，使其非常非常不可靠。

Css/Javascript:

CSS/Javascript：

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

Pros:

优点：

• It hides....sometimes. Refer to p1 on the example.
• After unhiding, it will return back to using the previous display value....sometimes. Refer to p1 on the example.
• If you want to grab all hidden objects, you just need to do $(".hidden").

• 它隐藏......有时。请参阅示例中的 p1。
• 取消隐藏后，它会返回使用以前的显示值......有时。请参阅示例中的 p1。
• 如果你想抓取所有隐藏的对象，你只需要执行$(".hidden").

Cons:

缺点：

• Does not hide if the display value was set directly on the html. Refer to p2 on the example.
• Does not hide if the display is set in javascript using css(). Refer to p3 on the example.
• Slightly more code because you have to define a css attribute.

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

Example: https://jsfiddle.net/476oha8t/8/

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

.

.

Changing display using toggle()

使用 toggle() 更改显示

Javascript:

Javascript：

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

Pros:

优点：

• Always works.
• Allows you to not have to worry about which state it was prior to switching. The obvious use for this is for a....toggle button.
• Short and simple.

• 总是有效。
• 让您不必担心切换之前的状态。最明显的用途是用于....切换按钮。
• 简短而简单。

Cons:

缺点：

• If you need to know which state it is switching to in order to do something not directly related, you will have to add more code (an if statement) to find out which state it is in.
• Similar to the previous con, if you want to run a set of instructions that contains the toggle() for the purpose of hiding, but you don't know if it is already hidden, you have to add a check (an if statement) to find out first and if it is already hidden, then skip. Refer to p1 of the example.
• Related to the previous 2 cons, using toggle() for something that is specifically hiding or specifically showing, can be confusing to others reading your code as they do not know which way they will toggle.

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

Example: https://jsfiddle.net/cxcawkyk/1/

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

.

.

Changing display using hide()/show()

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

Javascript:

Javascript：

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

Pros:

优点：

• Always works.
• After unhiding, it will return back to using the previous display value.
• You will always know which state you are swapping to so you:
  1. don't need to add if statements to check visibility before changing states if the state matters.
  2. won't confuse others reading your code as to which state you are switching to if, if the state matters.
• Intuitive.

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

Cons:

缺点：

• If you want to imitate a toggle, you will have to check the state first and then switch to the other state. Use toggle() instead for these. Refer to p2 of the example.

• 如果要模仿切换，则必须先检查状态，然后再切换到其他状态。使用 toggle() 代替这些。请参阅示例的 p2。

Example: https://jsfiddle.net/k0ukhmfL/

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

.

.

Overall, I would say the best to be hide()/show() unless you specifically need it to be a toggle. I hope you found this information to be helpful.

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

回答by Koos Jaspers

Just create hide and show methods yourself for all elements, as follows

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

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

After this you can use the methods with the usual element identifiers like in these examples:

在此之后，您可以使用具有常用元素标识符的方法，如这些示例中所示：

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

or:

或者：

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

回答by Koos Jaspers

I recommend Javascript, because its relatively fast and more malleable.

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

回答by phpdroid

If you are using it in a tableuse this :-

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

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