js控制元素的隐藏和显示

文章来源：http://www.imtr.cn/html/n189.html

话不多说，直接上代码：

<script language="javascript">
  function dedecmsok() {
    var divContainer = document.getElementById('yc');
    if (divContainer.style.display == "" || divContainer.style.display == "block") {
      divContainer.style.display = "none";
    } else {
      divContainer.style.display = "block";
    }
  }
</script>

在需要隐藏/显示的元素增加id值，id="yc"

控制按钮增加onclick="dedecmsok()"

隐藏 / 显示←点击按钮试试看

当然，也可以用一个按钮同时控制2个元素的隐藏与显示，只需要增加一段代码即可：

var divContainer=document.getElementById('yc2');
if(divContainer.style.display==""||divContainer.style.display=="block"){
divContainer.style.display="none";
}else{
divContainer.style.display="block";
}

具体如下，依然用onclick="dedecmsok()"进行控制，元素的id值不能相同，理论上可以无限增加：

<script language="javascript">
  function dedecmsok() {
    var divContainer = document.getElementById('yc1');
    if (divContainer.style.display == "" || divContainer.style.display == "block") {
      divContainer.style.display = "none";
    } else {
      divContainer.style.display = "block";
    }
    var divContainer = document.getElementById('yc2');
    if (divContainer.style.display == "" || divContainer.style.display == "block") {
      divContainer.style.display = "none";
    } else {
      divContainer.style.display = "block";
    }
  }
</script>

隐藏 / 显示图片

原文地址：http://www.imtr.cn/html/n189.html