HTML标签怎么隐藏或显示

在设计网页时，有时需要静态或动态地隐藏标签或显示被隐藏的标签，那该怎么实现呢？

一 与标签隐藏与否有关的样式

  1. visibility
    标签的visibility样式为""(空)时是显示状态，为"hidden"时是隐藏状态；
    "hidden"时，标签不占位置；
  2. display
    标签的display样式为""(空)时是显示状态，为"none"时是隐藏状态；
    "none"时，标签占据位置；

二 如何更改

  1. 通过HTML的标签来改

    改display有一种方法：

      <h1 id="a" style="display: none">Hello World!</h1>

    改visibility则有两种方法（二者是等价的）：

      <h1 id="a" style="visibility: hidden">Hello World!</h1>
  <h1 id="a" hidden>Hello World!</h1>

  2. 通过javascript来改
    改display：

      document.getElementById("ID").style.display = 'none';      //使标签隐藏
  document.getElementById("ID").style.display = '';      //使标签显示

    改visibility：

      document.getElementById("ID").style.visibility = 'hidden';      //使标签隐藏            
  document.getElementById("ID").style.visibility = '';      //使标签显示

    用js时，记得要说明更改对象的属性是style！

最后附上高清代码实例：

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
</head>
<body>
	<h1 id="a" style="display: none">Hello World!</h1>
	<h1 id="b">Hello cnblogs!</h1>
	<script>
		a.style.visibility = 'hidden';	//占据位置
		a.style.visibility = '';	//占据位置
		a.style.display = 'none';	//不占据位置
		a.style.display = '';	//不占据位置
	</script>
</body>
</html>
posted @ 2020-05-20 17:22  ttjibu  阅读(23177)  评论(0)  编辑  收藏  举报