div加hidden属性后,用css的visibility:visible没法使其可见

最新推荐文章于 2023-07-05 23:59:29 发布

kfepiza

最新推荐文章于 2023-07-05 23:59:29 发布

阅读量694

点赞数

分类专栏：试验演示 HTML CSS JS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/kfepiza/article/details/126258712

版权

HTML CSS JS 同时被 2 个专栏收录

84 篇文章 2 订阅

订阅专栏

试验演示

17 篇文章 0 订阅

订阅专栏

div加hidden属性后,用css的visibility:visible没法使其可见

设置了hidden属性后,相当于display:none,元素不再占位, 而visibility:hidden时,元素会占位

测试代码

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>div加hidden属性后,用css的visibility:visible没法使其可见</title>

	<style>

		#section1>div{font-size:30px;}
		button{font-size:20px; padding:10px 30px;}

		#div2 { visibility: visible; display:block; }

	</style>


</head><body>


	<section id="section1" >
		<div id="div1" hidden="hidden" >div1 第1个设置了属性hidden="hidden"的div</div>
		<div id="div2" hidden="hidden" >div2 第2个设置了属性hidden="hidden"的div</div>
		<div id="div3"  >div3 没有设置hidden属性</div>
		<div id="div4" >上面有三个div, 第一和第二个设置了hidden属性, 第二个div用css的visibility:visible没法使其可见, 第三个div没有设置hidden,用visibility:visible后,虽不可见,但占位</div>
		<div>设置了hidden属性后,相当于display:none,元素不再占位, 而visibility:hidden时,元素会占位</div>
	</section>

	<fieldset><legend>切换div3的visibility的按钮</legend>
		<button type="button" onclick="document.getElementById('div3').style.visibility='visible'; " >使div3的.visibility='visible' , 执行document.getElementById('div3').style.visibility='visible';</button>
		<br/>
		<button type="button" onclick="document.getElementById('div3').style.visibility='hidden'; " >使div3的.visibility='hidden' , 执行document.getElementById('div3').style.visibility='hidden';</button>

	</fieldset>


</body></html>

效果
在这里插入图片描述
点击按钮设置div3的visibility:hidden , 布局没有发生变化

在这里插入图片描述

kfepiza

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
div加hidden属性后,用css的visibility:visible没法使其可见

设置了hidden属性后,相当于display:none,元素不再占位, 而visibility:hidden时,元素会占位。div加hidden属性后,用css的visibility:visible没法使其可见。点击按钮设置div3的visibility:hidden , 布局没有发生变化。
复制链接

扫一扫