Web 之 html 如何显示隐藏Html元素的两种方法简单整理
目录
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
一、简单介绍
二、实现原理
三、注意事项
四、代码示例
一、简单介绍
Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍，Web 开发中， 如何显示隐藏Html元素的两种方法简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
二、实现原理
1、方法一：div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白；
2、方法二：通过设置display属性可以使div隐藏后释放占用的页面空间。
三、注意事项
1、div的visibility可以控制div的显示和隐藏，但是隐藏后页面可能显示空白（元素的位置仍被占用）
2、通过设置display属性可以使div隐藏后释放占用的页面空间（元素的位置不被占用）
四、代码示例
<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
if(p1.style.display=='block') p1.style.display='none';
else p1.style.display='block';
if(p2.style.display=='block') p2.style.display='none';
else p2.style.display='block';
}
function showAndHidden2(){
var p3=document.getElementById("p3");
var p4=document.getElementById("p4");
if(p3.style.visibility=='visible') p3.style.visibility='hidden';
else p3.style.visibility='visible';
if(p4.style.visibility=='visible') p4.style.visibility='hidden';
else p4.style.visibility='visible';
}
</script>
</head>
<body>
<p>display：元素的位置不被占用</p>
<p id="p1" style="display:block;">p 1</p>
<p id="p2" style="display:none;">p 2</p>
<input type="button" onclick="showAndHidden1();" value="p切换" />
<hr>
<p>visibility：元素的位置仍被占用</p>
<p id="p3" style="visibility:visible;">p 3</p>
<p id="p4" style="visibility:hidden;">p 4</p>
<input type="button" onclick="showAndHidden2();" value="p切换" />
</body>
</html>1、visibility
style="visibility: none;"
document.getElementById("xxxxxx").style.visibility="hidden";//隐藏
document.getElementById("xxxxxx").style.visibility="visible";//显示
$("#xxxxxx").css("vicibility","hidden")
$("#xxxxxx").css("vicibility","visible")
2、display
style="display: none;"
document.getElementById("xxxxxx").style.display="none";//隐藏
document.getElementById("xxxxxx").style.display="";//显
$("#xxxxxx").css("display","none");
$("#dixxxxxxvid").css("display","");
更多推荐
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
发布评论