js控制div显示与隐藏

发布时间:2020-05-08编辑:脚本学堂
本文介绍了js脚本实现div层的显示与隐藏的方法,通过元素的display属性显示或隐藏div,需要的朋友参考下。

例子,js控制div显示与隐藏
 

复制代码 代码示例:
<html> 
<script language="javascript>  
function clik(){ 
    var div_data=document.getElementById("div_ta").getElementsByTagName("div"); 
    alert('111='+div_data.length); 
     
    for(var i=0;i<div_data.length;i++) 
    { 
        if(div_data[i].style.display=="none")
        { 
            div_data[i].style.display="block"; //div显示与隐藏 
        } else { 
            div_data[i].style.display="none"; 
        } 
    } //by www.jb200.com

</script> 
<body> 
<input type="button" onClick="clik()" value="div显示与隐藏"/> 
 <table width="223" height="123" border="1" id="div_ta"> 
  <tr> 
    <td><div id="div1" style="display:none;">div1</div></td> 
    <td><div id="div2" style="display:block;">div2</div></td> 
  </tr> 
  <tr> 
    <td><div id="div4" style="display:none;">div4</div></td> 
    <td><div id="div5" style="display:block;">div5</div></td> 
  </tr> 
  <tr> 
    <td><div id="div7" style="display:none;">div7</div></td> 
    <td><div id="div8" style="display:block;">div8</div></td> 
  </tr> 
</table>
</body> 
</html>

例子比较简单,主要学习下js脚本中使用style.display控制元素隐藏或显示的方法,希望对大家有所帮助。