• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    通过display或visibility来隐藏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" onclick="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" onclick="showAndHidden2();" value="DIV切换" />
    </body>
    </html>
    上一篇:HTML标签上标sup、下标sub应用介绍
    下一篇:设置disabled属性后台读不到数据如何让select支持readonly
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    通过display或visibility来隐藏html元素 通过,display,或,visibility,