html如何控制元素显示和隐藏

htML控制元素显示和隐藏的方法：1、使用display方法隐藏，代码为【div1.style.display='none'】；2、使用visibilITy方法显示，代码为【div3.style.visibility='hidden'】。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html控制元素显示和隐藏的方法：

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

html>
    head>
    title>
    HTML元素的显示与隐藏控制/title>
    script tyPE="text/javascript">
function showAndHidden1(){
      VAR div1=document.getElementById("div1");
      var div2=document.getElementById("div2");
      if(div1.style.display=='block') div1.style.display='none';
      else div1.style.display='block';
      if(div2.style.display=='block') div2.style.display='none';
      else div2.style.display='block';
}
 function showAndHidden2(){
      var div3=document.getElementById("div3");
      var div4=document.getElementById("div4");
      if(div3.style.visibility=='visible') div3.style.visibility='hidden';
      else div3.style.visibility='visible';
      if(div4.style.visibility=='visible') div4.style.visibility='hidden';
      else div4.style.visibility='visible';
}
    /script>
    /head>
    body>
    div>
    display：元素的位置不被占用/div>
    div id="div1" style="display:block;
    ">
    DIV 1/div>
    div id="div2" style="display:none;
    ">
    DIV 2/div>
    input type="button" οnclick="showAndHidden1();
    " value="DIV切换" />
    hr>
    div>
    visibility：元素的位置仍被占用/div>
    div id="div3" style="visibility:visible;
    ">
    DIV 3/div>
    div id="div4" style="visibility:hidden;
    ">
    DIV 4/div>
    input type="button" οnclick="showAndHidden2();
    " value="DIV切换" />
    /body>
    /html>
    

相关学习推荐：html视频教程

以上就是html如何控制元素显示和隐藏的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！