html display属性与visibility属性与两者隐藏元素的区别

最新推荐文章于 2024-04-12 08:24:13 发布

没时间喽

最新推荐文章于 2024-04-12 08:24:13 发布

阅读量1.1k

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： html 前端

本文链接：https://blog.csdn.net/Z15800020057/article/details/131403873

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML 中有多种 display 属性，它们用来控制元素的显示方式。常用的 display 属性值及其作用如下：

block：将元素显示为块级元素，即一个元素占据整个父容器的宽度并独占一行。
inline：将元素显示为行内元素，即元素仅占据它的实际宽度，不会独占一行，可以和其他行内元素在同一行。
inline-block：将元素显示为行内块级元素，即元素会占据它的实际宽度和高度，但是不会独占一行，可以和其他行内元素在同一行。
none：将元素隐藏，即不占据空间，并且不会被屏幕阅读器和搜索引擎检索。
flex：将元素显示为弹性盒子，即可以通过 flex 属性控制元素的位置和大小。
grid：将元素显示为网格盒子，即可以通过 grid 属性控制元素的位置和大小。
table、table-row、table-cell：将元素显示为表格或表格单元格。

HTML 中的 visibility 属性用于控制元素的可见性，从而影响元素在页面中的显示状态。visibility 属性的取值包括以下三种：

visible（默认值）：元素可见，如果父元素或祖先元素具有 hidden 属性，则不会覆盖该属性。
hidden：元素不可见，但仍占据页面上的空间。
collapse：仅适用于表格行元素（tr），表示折叠该行的边框和内部元素，但不会从表格中移除该行，因此仍会占据页面上的空间。

两者的区别

通过设置 visibility 属性，可以对网页中的元素进行隐藏或显示操作，同时保留其在网页布局中的占位。注意，当元素的 display 属性值为 none 时，元素不仅不可见，同时也不占据页面上的空间。

<!DOCTYPE html>
<html>
<head>
	<title>Display vs visibility</title>
	<style>
		.container {
			border: 1px solid #ccc;
			padding: 10px;
			margin: 10px;
			background-color: #f5f5f5;
		}
		.box {
			width: 100px;
			height: 50px;
			background-color: #ffcc00;
			border: 1px solid #ccc;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.hide {
			display: none;
		}
		.invisible {
			visibility: hidden;
		}
	</style>
</head>
<body>
	<h2>Display vs visibility</h2>
	<p>点击下面的按钮可以切换两个元素的显示或隐藏状态：</p>
	<button onclick="toggleDisplay()">Toggle display</button>
	<button onclick="toggleVisibility()">Toggle visibility</button>
	<div class="container">
		<div class="box" id="box1">Box 1</div>
		<div class="box" id="box2">Box 2</div>
	</div>

	<script>
		function toggleDisplay() {
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			if (box1.classList.contains("hide")) {
				box1.classList.remove("hide");
				box2.classList.remove("hide");
			} else {
				box1.classList.add("hide");
				box2.classList.add("hide");
			}
		}

		function toggleVisibility() {
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			if (box1.classList.contains("invisible")) {
				box1.classList.remove("invisible");
				box2.classList.remove("invisible");
			} else {
				box1.classList.add("invisible");
				box2.classList.add("invisible");
			}
		}
	</script>
</body>
</html>

通过点击页面中的两个按钮，我们可以切换盒子的隐藏或不可见状态。可以看到，当我们将元素的 display 属性设置为 none 时，它们不仅被隐藏了，而且元素所占用的空间也消失了，不再占据页面布局空间。而当我们将元素的 visibility 属性设置为 hidden 时，元素仍然占据页面上的空间，只是不显示而已，不会对页面布局产生影响。