样式隐藏、block和none之间的区别

Differences between style hidden, block and none

本文关键字：之间 区别 none 隐藏 block 样式      更新时间：2023-09-26

我想找出不同的风格

    隐藏
  • 块

我正在尝试这个例子，但不幸的是这不起作用。有人能告诉我答案吗?

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

你真的很接近了。两个不同的属性

display: (block || none) (there are more options here)
visibility: (visible || hidden)

不同的是，display:none的元素对视图是完全隐藏的。所以如果你有一个高度和宽度为300px的方框那么你就看不到任何东西了

使用visibility:hidden，它将保持区域的尺寸，但将隐藏所有的内容。

Block不是一个有效的可见性选项。您正在考虑可以设置为block的Display属性。

能见度

显示

应该是style。显示"block"answers"none"是否工作。可见性为页面上的元素保留空间，而display:none则不保留空间。

查看这里的完整参考和示例，了解不同风格声明之间的差异。(隐藏与可见性相关)

基本上

:

显示:块

display: block表示元素作为块显示，就像段落和页眉一样。块的上面和下面都有一些空白，并且不允许旁边有任何HTML元素，除非有其他排序(例如，通过向另一个元素添加float声明)。

显示:没有

display: none表示该元素根本不显示(因此在示例中也不会看到它)。

CSS样式有两个元素:visibility和display。可见性可以是hidden或visible(或collapse表)。显示inline, block或none。

display: none和visibility: hidden的主要区别在于，在第二种情况下，内容仍然占用页面上的空间用于布局目的，但不可见，然而，display: none的内容完全从布局中删除。

有两种你容易混淆的css样式:

visibility，可以设置为visible或hidden -这将隐藏对象而不将其从流中移除，这意味着页面的格式将保持不变。

display可以是很多东西，包括:block, inline, none。

设置display:none也隐藏了一个元素，但它也从页面流中删除了它，这意味着周围的元素可能会受到影响，因为它们"填充"了这个洞。

隐藏文档元素 
 document.getElementById('layer1').style.visibility = 'hidden';

也可以通过

实现
 document.getElementById('layer1').style.display = 'none';

所以为了显示你做了

 document.getElementById('layer1').style.display = 'block';

或

 document.getElementById('layer1').style.visibility = 'none';

在定义div时，您只需要添加style属性，如下所示

<div id="layer1" style="disply:none" >
</div>

和在函数

中使用时
document.getElementById("layer1").style.display = "";

您可以尝试以下修改后的代码:

<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>
相关文章：