js控制頁面元素的隱藏與顯示

<body>javascript

<div>
  <button onclick='javascript:Layer_HideOrShow();'>show</button>
  </div>
  <div id="hiddenDiv" style="display: block; visibility: visible;">
  this is hiddenDiv !
  </div>css

</body>java

 

1.ide

function Layer_HideOrShow() this

 {      var current=document.getElementById("hiddenDiv"); ip

        if(current.style.visibility=="hidden") get

        {    current.style.visibility ="visible"; it

        } else  {  current.style.visibility ="hidden";  } io

 } function

2.
function  Layer_HideOrShow(){ 

     if (document.getElementById){ 

            target=document.getElementById("hiddenDiv"); 

             if (target.style.display=="block"){ 

                 target.style.display="none"; 

             } else { 

                  target.style.display="block"; 

             } 

     } 

}

3.
function  Layer_HideOrShow(){
   $("#hiddenDiv").show();  
   $("#hiddenDiv").hide(); 

}

4.

要控制div的顯示與隱藏:
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切換元素的可見狀態。若是元素是可見的,切換爲隱藏的;若是元素是隱藏的,切換爲可見的。

$("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none';

相關文章
相關標籤/搜索