Javascript 隐藏的 HTML 元素占用空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3700818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hidden HTML elements take space
提问by Mike D
I'd like to make some empty hidden elements (iframes would be nice, paragraphs would do) that Javascript would later fill and modify. I have not been able to figure out how to keep these elements from taking up space. I've turned off margins and padding and set height to zero but still end up with blank space.
我想制作一些空的隐藏元素（iframes 会很好，段落会做），Javascript 稍后会填充和修改。我一直无法弄清楚如何防止这些元素占用空间。我关闭了边距和填充并将高度设置为零，但最终仍然是空白。
I'd like to see an example of an hidden element that takes no space on the page. Actually, I'd like to see the HTML, CSS, and Javascript. :-).
我想看一个不占用页面空间的隐藏元素的例子。实际上，我想看看 HTML、CSS 和 Javascript。:-)。
回答by Jess
If you're using visibility: hidden;you should be using display: none;instead.
如果您正在使用visibility: hidden;，则应该使用display: none;。
回答by James Hull
I assume you are using visibility: hidden? As you have seen, this will hide it, but will still take up space.
我假设您正在使用可见性：隐藏？如您所见，这将隐藏它，但仍会占用空间。
However, using display: none will hide it and remove it from the page layout.
但是，使用 display: none 将隐藏它并将其从页面布局中删除。
回答by awol
I have found that if i use visibility: nonethen I lose the targets embedded in those objects. As a result I set the font-size: 0ptwhich seems to work well for me.
我发现如果我使用，visibility: none那么我会丢失嵌入在这些对象中的目标。因此，我设置了font-size: 0pt似乎对我来说效果很好的。
I use this to hide the default names that ReSTructured text puts in for inline internal targets; span.target { font-size: 0pt };
我使用它来隐藏 ReSTtructured 文本为内联内部目标设置的默认名称； span.target { font-size: 0pt };
回答by thedanielhanke
#myelement { display:none; }should already do it via CSS, using <div id="myelement"></div>
#myelement { display:none; }应该已经通过 CSS 做到这一点，使用 <div id="myelement"></div>
回答by Tim
The most common solution is an input with type hidden.
最常见的解决方案是输入类型为 hidden。
<input type="hidden" value="yourvalue" id="yourid" />
No styling required.
不需要造型。
You can set the value of this input with somthing like
您可以使用类似的东西设置此输入的值
document.getElementById('yourid').value="The Value Here";
回答by Palantir
Why can't you just set style="display:none" or style="visibility:hidden", and then set it to visible after you have comleted the missing content?
为什么不能直接设置style="display:none" 或者style="visibility:hidden"，然后在完成缺失的内容后设置为可见呢？
回答by Reddappa Naidu
To hide the element, use :
要隐藏元素，请使用：
document.getElementById(Id).style.display = "none";
To show the element, use :
要显示元素，请使用：
document.getElementById(Id).style.display = "inline-block";
回答by mystifeid
style="visibility:hidden;line-height:0;"
Setting the height to less than the line-height is generally a waste of time.
将高度设置为小于 line-height 通常是在浪费时间。
