html隐藏展示切换,如何通过display或visibility来实现HTML元素的显示与隐藏

HTML元素的显示与隐藏控制

functionshowAndHidden1(){

vardiv1=document.getElementById("div1");

vardiv2=document.getElementById("div2");

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

elsediv1.style.display='block';

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

elsediv2.style.display='block';

}

functionshowAndHidden2(){

vardiv3=document.getElementById("div3");

vardiv4=document.getElementById("div4");

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

elsediv3.style.visibility='visible';

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

elsediv4.style.visibility='visible';

}

display：元素的位置不被占用

DIV1