下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:JS---元素隐藏的不同方式

作者:jane_panyiyun     来源: https://www.cnblogs.com/jane-panyiyun/p/12098502.html点击数:1186发布时间: 2020-03-24 20:19:45

标签: visibility元素web

Web开发

  visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。请使用"display"属性来创建不占据页面空间的不可见元素。

  元素隐藏的不同方式

  dispaly,visibility,opacity,height&border为0

  <!DOCTYPE html>

  <htmllang="en">

  <head>

  <metacharset="UTF-8">

  <title>title</title>

  <style>

  div{

  width:300px;

  height:200px;

  border:1pxsolidred;

  }

  </style>

  </head>

  <body>

  <inputtype="button"value="显示效果"id="btn"/>

  <divid="dv"></div>哈哈

  <scriptsrc="common.js"></script>

  <script>

  document.getElementById("btn").onclick=function(){

  //隐藏div

  //不占位

  //my$("dv").style.display="none";

  //占位

  //my$("dv").style.visibility="hidden";

  //占位

  //my$("dv").style.opacity=0;

  //占位

  //my$("dv").style.height="0px";

  //my$("dv").style.border="0pxsolidred";

  };

  </script>

  </body>

  </html>

  所有主流浏览器都支持visibility属性。但是,任何的版本的InternetExplorer(包括IE8)都不支持"inherit"和"collapse"属性值,而支持visible和hidden值。

赞(11)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程