如何隐藏或显示HTML标签

顺晟科技

2021-08-28 11:15:16

154

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

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

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

二如何更改

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

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

上一篇：js实现隐藏和显示html 下一篇：js隐藏和显示html标签内容

网站建设

Html

如何隐藏或显示HTML标签

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

二如何更改

Html

如何隐藏或显示HTML标签

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

二 如何更改

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

二如何更改