div层的visibility和display区别

最新推荐文章于 2022-09-27 15:13:17 发布

程宇寒

最新推荐文章于 2022-09-27 15:13:17 发布

阅读量519

点赞数

文章标签： visibility 前端 js javaScript display

本文链接：https://blog.csdn.net/czh500/article/details/103830691

版权

使用display和visibility都可以隐藏指定的区域，区别是，display隐藏后不会留空白，

而visibility则会在页面上留有空白。一般，用display的情况要多些！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div层的visibility和display区别</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
.div1{
	/**div居中**/
	margin:auto;
	border:10px solid silver;
	background-color:#FF9;
	width:300px;
	height:300px;
	opacity:0.50;/**其他浏览器（0.5为透明度，在0-1之间的浮点数）**/
	filter:alpha(opacity=40);/**IE（40为透明度，在0-100之间的整数）**/
	color: black;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">div层的visibility和display区别</h3>
使用display和visibility都可以隐藏指定的区域，区别是，display隐藏后不会留空白，<br/>
而visibility则会在页面上留有空白。一般，用display的情况要多些！<br/>
	参考网页https://blog.csdn.net/qq_44884203/article/details/89292756
	<br/>
	<div id="testDiv" class="div1" style="background-color:OrangeRed;display:none;">
		div层的visibility和display区别
	</div>
	<div id="testDiv2" class="div1" style="background-color:red;visibility: visible;">
		div层的visibility和display区别
	</div>
	通过设置display属性可以使div隐藏后释放占用的页面空间<br/>
	<input type="button" value="div的display" onclick="testDisplay();">
	<br/><br/>
	div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白(即div仍然会占据空间)<br/>
	<input type="button" value="div的visibility" onclick="testVisibility();">
	<br/><br/>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function testDisplay(){
	var divNode = document.getElementById('testDiv');
	console.log('****' + divNode.style.display);
	if(divNode.style.display == 'none'){
		divNode.style.display = '';
	}else{
		divNode.style.display = 'none';
	}
}

function testVisibility(){
	var divNode = document.getElementById('testDiv2');
	console.log('****' + divNode.style.visibility);
	if(divNode.style.visibility == 'hidden'){
		divNode.style.visibility = 'visible';
	}else{
		divNode.style.visibility = 'hidden';
	}
}
</script>
</html>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div层的visibility和display区别

使用display和visibility都可以隐藏指定的区域，区别是，display隐藏后不会留空白，而visibility则会在页面上留有空白。一般，用display的情况要多些！<!DOCTYPE html><html><head><meta charset="UTF-8"><title>...
复制链接

扫一扫