html元素隐藏并不占位置,通过display或visibility来实现HTML元素的显示与隐藏

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

复制代码

代码如下:

HTML元素的显示与隐藏控制

functionshowAndHidden1(){

varp1=document.getElementById("p1");

varp2=document.getElementById("p2");

if(p1.style.display=='block')p1.style.display='none';

elsep1.style.display='block';

if(p2.style.display=='block')p2.style.display='none';

elsep2.style.display='block';

}

functionshowAndHidden2(){

varp3=document.getElementById("p3");

varp4=document.getElementById("p4");

if(p3.style.visibility=='visible')p3.style.visibility='hidden';

elsep3.style.visibility='visible';

if(p4.style.visibility=='visible')p4.style.visibility='hidden';

elsep4.style.visibility='visible';

}

display：元素的位置不被占用

p1

p2

---

visibility：元素的位置仍被占用

p3

p4

本文转载自中文网