Web 之 html 如何显示隐藏Html元素的两种方法简单整理

仙魁XAN

已于 2022-04-18 18:08:56 修改

阅读量6.4k

点赞数 3

分类专栏： Web 文章标签： html web 元素显隐 html 显示隐藏 JavaScript

于 2022-04-18 18:08:05 首次发布

本文链接：https://blog.csdn.net/u014361280/article/details/124255588

版权

Web 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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","");