📌  相关文章
📜  HTML DOM 文档隐藏属性(1)

📅  最后修改于: 2023-12-03 15:01:10.367000             🧑  作者: Mango

HTML DOM 文档隐藏属性

在 HTML DOM 中，有一些属性可以使元素隐藏，这些属性控制元素在页面上的可见性。一些常用的文档隐藏属性如下：

1. display

display 属性控制元素在页面上的显示方式。通过设置该属性，可以使元素从页面中消失。常用的属性值有 none 和 block。

语法：
element.style.display = "none";
element.style.display = "block";
例子：
<!DOCTYPE html>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<p>Click the button to hide the heading:</p>

<button onclick="document.getElementById('myHeader').style.display='none'">Hide</button>
<button onclick="document.getElementById('myHeader').style.display='block'">Show</button>

</body>
</html>

运行上述HTML代码，我们可以看到页面中有两个按钮，一个用于隐藏 <h1> 元素，另一个用于显示。

2. visiblity

visibility 属性类似于 display 属性，也可以使元素不可见，但与 display 不同的是，元素仍然存在于页面上，仅仅是看不见。

语法：
element.style.visibility = "hidden";
element.style.visibility = "visible";
例子：
<!DOCTYPE html>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<p>Click the button to hide the heading:</p>

<button onclick="document.getElementById('myHeader').style.visibility='hidden'">Hide</button>
<button onclick="document.getElementById('myHeader').style.visibility='visible'">Show</button>

</body>
</html>

运行上述HTML代码，我们可以看到页面中有两个按钮，一个用于将 Hello World! 隐藏，另一个用于显示。

3. opacity

opacity 属性指定元素的不透明度。将 opacity 属性设为0，则元素将变得完全透明。该属性与 visibility 属性不同的是，即使元素变得透明，它仍然存在于页面上。

语法：
element.style.opacity = "0"; 
element.style.opacity = "1";
例子：
<!DOCTYPE html>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<p>Click the button to hide the heading:</p>

<button onclick="document.getElementById('myHeader').style.opacity='0'">Hide</button>
<button onclick="document.getElementById('myHeader').style.opacity='1'">Show</button>

</body>
</html>

运行上述HTML代码，我们可以看到页面中有两个按钮，一个用于将 Hello World! 变得透明，另一个用于显现它。

4. overflow

overflow 属性指定当元素内容溢出时该如何处理。通过将 overflow 属性设为 hidden，元素的溢出内容被隐藏。

语法：
element.style.overflow = "hidden";
例子：
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">

<div style="width:200px;height:100px;border:1px solid black;overflow:hidden">
  <p>Some text that really needs to be hidden.</p>
</div>

</body>
</html>

运行上述HTML代码，我们可以看到一个包含文本的 <div> 元素。由于我们将 overflow 设为 hidden，当文本溢出 <div> 时，它会被隐藏。

5. clip

clip 属性指定元素内容的上下左右裁剪。这个属性适用于绝对定位或固定定位的元素。

语法：
element.style.clip = "rect(top, right, bottom, left)";
例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 250px;
  background: yellow;
  opacity: 0.7;
}
</style>
</head>
<body>

<div style="height:100px;clip:rect(0px,60px,200px,0px)">
  <p><i>这个元素被裁剪。</i></p>
  <p>向左移动鼠标，将改变元素裁剪方式。</p>
</div>

<script>
myFunction(document.getElementsByTagName("div")[0]);

function myFunction(elem) {
  var prevX = -1, prevY = -1, x = -1, y = -1;
  elem.onmousemove = function(event) {
    prevX = x;
    prevY = y;
    x = event.clientX;
    y = event.clientY;
    if (prevX > x && prevY < y) {
      elem.style.clip = "rect(0px,150px,200px," + x + "px)";
    } else if (prevX > x && prevY > y) {
      elem.style.clip = "rect(" + y + "px,150px," + y + "px," + x + "px)";
    } else if (prevX < x && prevY > y) {
      elem.style.clip = "rect(" + y + "px," + x + "px," + y + "px,0px)";
    } else if (prevX < x && prevY < y) {
      elem.style.clip = "rect(0px," + x + "px,200px,0px)";
    }
  }
}
</script>

</body>
</html>

运行上述HTML代码，我们可以看到一个黄色 <div> 元素，包含一段文字。将鼠标左键按住并移动，可以裁剪元素。

以上是五个常用的文档隐藏属性，它们可以用来使元素在页面上不可见，给前端设计带来了很大灵活性。