Javascript 隐藏样式、块样式和无样式的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6651939/
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
Differences between style hidden, block and none
提问by Seth
I am trying to find out the differences between style
我试图找出风格之间的差异
- hidden
- block
- none
- 隐
- 堵塞
- 没有任何
I am trying with this example, but unfortunately this isn't working. Could anybody please let me know the answer?
我正在尝试这个例子，但不幸的是这不起作用。有人可以让我知道答案吗？
<html>
<head>
<title>JavaScript Unleashed</title>
<script>
function callMe()
{
document.getElementById('layer1').style.visibility = 'block';
}
</script>
</head>
<body onload="callMe()">
<div name="layer1">
<hr>DIV 1<hr>
</div>
</body>
</html>
回答by Seth
You're really close. Two different properties.
你真的很亲近。两种不同的属性。
display: (block || none) (there are more options here)
visibility: (visible || hidden)
The different is with display:nonethe element is completely hidden from the view. So if you have a box with 300px height and width then you would not see anything there.
不同的是display:none元素完全隐藏在视图中。因此，如果您有一个高度和宽度为 300 像素的框，那么您将看不到任何内容。
With visibility:hiddenit will keep the dimensions of the area, but will hide all the content.
随着visibility:hidden它将保持区域的尺寸，但会隐藏所有的内容。
回答by Andrew Peacock
Block isn't a valid visibility option. You are thinking of the Display property which can be set to block.
阻止不是有效的可见性选项。您正在考虑可以设置为阻止的 Display 属性。
回答by AllisonC
It should be style.display for "block" and "none" to work. Visibility reserves space for the element on the page while, display:none doesn't.
“block”和“none”应该是 style.display 才能工作。可见性为页面上的元素保留空间，而 display:none 则不会。
回答by Nicola Peluchetti
Take a look herefor full reference and examples on the difference between different styles decalrations. (hidden relates to visibility)
查看此处以获取有关不同样式贴标之间差异的完整参考和示例。（隐藏与可见性有关）
Basically:
基本上：
display: block
显示：块
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: block 表示元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空白，并且旁边没有 HTML 元素，除非另有排序（例如，通过向另一个元素添加浮点声明）。
display: none
显示：无
display: none means that the element is not displayed at all (so you won't see it in the example either).
display: none 表示根本不显示该元素（因此您也不会在示例中看到它）。
回答by Aleks G
There are two elements in CSS style: visibilityand display. Visibility may be hiddenor visible(or collapsefor tables). Display may be inline, blockor none.
CSS 样式中有两个元素：visibility和display。可见性可以是hidden或visible（或collapse表）。显示可能是inline,block或none。
The main difference between display: noneand visibility: hiddenis that in the second case the content still takes spaces on the page for layout purposes, but is not visible, however with display: nonethe content is removed from the layout altogether.
display: none和之间的主要区别在于visibility: hidden，在第二种情况下，出于布局目的，内容仍然在页面上占用空间，但不可见，但是display: none内容完全从布局中删除。
回答by BonyT
There are two css styles you are confusing:
有两种 css 样式让您感到困惑：
visibilitywhich can be set to visibleor hidden- this hides the object without removing it from the flow, which means that the formatting of the page will be unchanged.
visibility可以设置为visibleor hidden- 这将隐藏对象而不将其从流中删除，这意味着页面的格式将保持不变。
displaywhich can be many things including: block, inline, none.
display这可以是很多东西，包括：block, inline, none。
Setting display:nonealso hides an element, but it also removes it from the page flow, meaning surrounding elements can be affected as they "fill" the hole.
设置display:none也会隐藏元素，但也会将其从页面流中删除，这意味着周围的元素在“填充”漏洞时可能会受到影响。
回答by Nasaralla
for hiding document element
用于隐藏文档元素
document.getElementById('layer1').style.visibility = 'hidden';
that can also be achieved by
这也可以通过
document.getElementById('layer1').style.display = 'none';
so for showing you do
所以为了向你展示
document.getElementById('layer1').style.display = 'block';
or
或者
document.getElementById('layer1').style.visibility = 'none';
回答by Ajay Sharma
while defining the div you just need to add the style property as below
在定义 div 时，您只需要添加如下样式属性
<div id="layer1" style="disply:none" >
</div>
and while using in function
并在功能中使用时
document.getElementById("layer1").style.display = "";
回答by Nakshatra
You can try the following modified code:
您可以尝试以下修改后的代码：
<html>
<head>
<title>JavaScript Unleashed</title>
<script>
function callMe()
{
document.getElementById("layer1").style.display = "none";
}
function resetElement()
{
document.getElementById("layer1").style.display = "block";
}
</script>
</head>
<body>
<h1> Heading </h1>
<div id="layer1">
<button onclick="callMe()">click to hide</button>
<hr>DIV 1<hr>
</div>
<div>
<button onclick="resetElement()">Reset All</button>
</div>
</body>
</html>
