使用 display 属性隐藏或显示 HTML 中的元素

17 Mar 2025 | 阅读 2 分钟

HTML 是网页的骨架，用于构建网站和 Web 应用程序的结构。

在本教程中，我们将探讨如何使用 display 属性来隐藏或显示 HTML 中的元素。

style display 属性通过 JavaScript/jQuery 访问 DOM 元素来隐藏和显示 HTML DOM 内容。

要隐藏一个元素，请将其 style display 属性设置为 "none"。

将 style display 属性设置为 "block" 以显示一个元素。

演示 style display 属性工作原理的技术

1. 创建一些 div，给它们一个 id 或 class，然后按如下方式为它们设置样式

<div class="rounded" id="rounded"></div>
<div class="circle" id="circle"></div>
<div class="square" id="square"></div>

2. Width 和 height 定义内容的宽度和高度，50% 创建一个圆形，border-radius 0% 创建一个方形边框，25% 创建一个圆角形状，float 定位 div，margin-right 使它们之间有间隙。

<style type="text/css">	
	.rounded {
		
		border-radius: 25%;
		float: left;
                       width: 140px;
		height: 140px;
		margin-right: 60px;
	}
	.circle {

		border-radius: 50%;
		float: left;
                      width: 140px;
		height: 140px;
		margin-right: 60px;
	}	
	.square {
		border-radius: 0%;
		float: left;
                        width: 140px;
		height: 140px;
		margin-right: 60px;
	}

3. Background-color 指定 div 背景的颜色。

                       #rounded {
			background-color: #F15412;
		}
		#circle {
			background-color: #EB1D36;
		}
		#square {
	                       background-color: #F73D93;   
			       }

4. document.getElementById 将选择具有指定 id 的 div。

<script type="text/javascript">
		document.getElementById("circle").onclick = function()

5. 当我们点击 div 时，style.display = "none" 会使其消失。

style.display 功能的应用

<html>
<head>

	<title>ABC....</title>

	<style type="text/css">


		.rounded {
			border-radius: 25%;
			float: left;
                        width: 140px;
		height: 140px;
			margin-right: 50px;
		}
		.circle {
		border-radius: 50%;
		float: left;
                        width: 140px;
		height: 140px;
		margin-right: 60px;
		}
		.square {
		border-radius: 0%;
		float: left; 
                      width: 140px;
		height: 140px;
		margin-right: 60px;
		}
		#rounded {
			background-color: #F15412;
		}
		#circle {
			background-color: #EB1D36;
		}
		#square {
			background-color: #F73D93;
		}
	</style>

</head>

<body>

	<div class="rounded" id="rounded"></div>
	<div class="circle" id="circle"></div>
	<div class="square" id="square"></div>

	<script type="text/javascript">
		document.getElementById("rounded").onclick = function() {

			document.getElementById("rounded").style.display = "none";

		}
		document.getElementById("circle").onclick = function() {

			document.getElementById("circle").style.display = "none";

		}
		document.getElementById("square").onclick = function() {

			document.getElementById("square").style.display = "none";

		}
	</script>

</body>

</html>

输出