欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

display或visibility来隐藏html元素

程序员文章站 2022-04-23 23:33:57
...
根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，下面有个简单的示例，大家可以参考下 有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

代码如下:

<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>


更多display或visibility来隐藏html元素相关文章请关注PHP中文网！

相关标签： display visibility 隐藏元素

上一篇： AntV 数据可视化解决方案发布 - zaohe

下一篇： js和jquery操作数组的方法

推荐阅读