隐藏和显示div的两种方法（display和visibility）

最新推荐文章于 2020-10-27 20:30:23 发布

shizhan1881

最新推荐文章于 2020-10-27 20:30:23 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： div button function input class html

本文链接：https://blog.csdn.net/linshizhan/article/details/7719795

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    
	    <style type="text/css">
	    	.yangshi1{
	    		width:200px;
	    		height:200px;
	    		background-color:red;
	    	}
	    	.yangshi2{
	    		width:300px;
	    		height:300px;
	    		background-color:blue;
	    	}
	    </style>
	    
	    <script type="text/javascript">
	    	function displayhid()
	    	{
	    		//利用display隐藏后，div的位置不存在了
	    		var div1 = document.getElementById("div1");
	    		div1.style.display="none";
	    	}
	    	
	    	function displayshow()
	    	{
	    		var div1 = document.getElementById("div1");
	    		div1.style.display="block";
	    	}
	    	
	    	function vishid()
	    	{
	    		//利用visibility隐藏后，div的还是占位的
	    		var div1 = document.getElementById("div1");
	    		div1.style.visibility="hidden";
	    	}
	    	
	    	
	    	function visshow()
	    	{
	    		var div1 = document.getElementById("div1");
	    		div1.style.visibility="visible";
	    	}
	    	
	    </script>
	</head>
	<body>
       <div class="yangshi1" id="div1">

       </div>
       
       <div class="yangshi2" id="div2">
       	
       </div>
       
       <input type="button"  value="用display隐藏div1" οnclick="displayhid();"/>
       
       <input type="button"  value="用display重新显示div1" οnclick="displayshow();"/>
       
       <input type="button"  value="用visibility隐藏div1" οnclick="vishid();"/>
       
       <input type="button"  value="用visibility重新显示div1" οnclick="visshow();"/>
	</body>
</html>

shizhan1881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隐藏和显示div的两种方法（display和visibility）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> .yangshi1{ width:200px; height:200px; background-col
复制链接

扫一扫