Question

我想找出风格之间的区别

隐藏
阻止
无

我正在尝试这个例子，但遗憾的是这不起作用。有谁可以让我知道答案？

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

Answer 1

你真的很亲密。两种不同的属性。

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

与display:none不同的是，元素完全隐藏在视图之外。所以，如果你有一个300px高度和宽度的盒子，那么你就不会看到任何东西了。

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

Answer 2

阻止不是有效的可见性选项。您正在考虑可以设置为阻止的Display属性。

Visibility

Display

Answer 3

应该是style.display“block”和“none”才能工作。可见性为页面上的元素保留空间，而display：none则不为。

Answer 4

请查看here以获取有关不同样式decalrations之间差异的完整参考和示例。（隐藏与能见度有关）

基本上：

显示：阻止

display：block表示元素显示为块，因为段落和标题始终如此。一个块在它上面和下面有一些空格，并且在它旁边不允许任何HTML元素，除非另有命令（例如，通过向另一个元素添加浮动声明）。

display：none

display：none表示该元素根本不显示（因此您也不会在示例中看到它）。

Answer 5

CSS样式有两个元素：visibility和display。对于表格，可见性可以是hidden或visible（或collapse。显示可以是inline，block或none。

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

Answer 6

有两种css样式令人困惑：

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

display可以有很多内容，包括：block，inline，none。

设置display:none也会隐藏一个元素，但它也会从页面流中删除它，这意味着周围的元素会在“填充”这个洞时受到影响。

Answer 7

用于隐藏文档元素

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

也可以通过

来实现

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

所以为了表明你做了

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

或

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

Answer 8

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

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

并且在功能中使用

document.getElementById("layer1").style.display = "";

Answer 9

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

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

样式隐藏，阻止和无

9 个答案: