css：关于display和visibility的区别

最新推荐文章于 2024-08-21 22:53:13 发布

朽木自雕xmzd

最新推荐文章于 2024-08-21 22:53:13 发布

阅读量156

点赞数

分类专栏：前端文章标签： css javascript

本文链接：https://blog.csdn.net/qq_16687863/article/details/100024195

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

关于display和visibility的区别

不说废话，直接上代码：

	<body>
		Hello
		<button onclick="hide(this,true)">Hide1</button>
		<button onclick="hide(this)">Hide2</button>
		World
		
		<script>
			function hide(e,reflow){
				console.log(reflow);
				if(reflow){
					e.style.display = "none";
				}else{
					e.style.visibility = "hidden";
				}
			}
		</script>
	</body>

最后效果图：

结果解释：

display：这个属性设置为none后，元素会被隐藏，并且元素所占用的位置也会释放出来，其他的元素则会占用该释放的空间。

visibility：这个属性设置为hidden后，元素会被隐藏，但是元素占用的空间并不会释放。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朽木自雕xmzd

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css：关于display和visibility的区别

关于display和visibility的区别不说废话，直接上代码： <body> Hello <button onclick="hide(this,true)">Hide1</button> <button onclick="hide(this)">Hide2</button> World <s...
复制链接

扫一扫