1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>标签或者内容的隐藏</title>
  5.     <style>
  6.         .display-none{
  7.             display:none;
  8.         }
  9.         .display-block{
  10.             display:inline-block;
  11.         }
  12.         /* visibility属性 */
  13.         .visibility-hidden{
  14.             visibility:hidden;
  15.         }
  16.         .visibility-visible{
  17.             visibility:visible;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.    <h3>1.hidden属性</h3>
  23.    <span id="hidden" hidden>通过hidden属性显示或隐藏</span>
  24.    <span  style="width:30px;height:30px;background-color:pink;" onclick="fnHidden()">hidden属性--点击</span>
  25.     <h3>2.style的display属性</h3>
  26.    <span id="display" class="display-none">通过display属性显示或者隐藏</span>
  27.    <span  style="width:30px;height:30px;background-color:pink;" onclick="fndDisplay()">display属性--点击</span>
  28.    <h3>2.style的display属性</h3>
  29.    <span id="visibility" class="visibility-hidden">visibility属性显示或者隐藏</span>
  30.    <span  style="width:30px;height:30px;background-color:pink;" onclick="fnVisibility()">visibility属性--点击</span>
  31.    <h2 style="color:red;">总结</h2>
  32.        方式1和方式2：隐藏元素不会占位置;<br/>
  33.        方式3，隐藏元素依旧占位子，避免空出位置。
  34. </body>
  35. <script type="text/javascript">
  36.     /**
  37.      *hidden属性应用 --方式1
  38.      */
  39.      function fnHidden(){
  40.          var ele = document.getElementById('hidden');
  41.          var flag = ele.hasAttribute('hidden');//是否有hidden属性
  42.          if(flag){//隐藏
  43.              ele.removeAttribute('hidden');
  44.          }else{//显示
  45.              ele.setAttribute('hidden','hidden');
  46.          }
  47.      }
  48.  
  49.      /**
  50.       *display属性--方式1
  51.       */
  52.      function fndDisplay(){
  53.          var ele = document.getElementById('display');
  54.          var className = ele.className;
  55.          if(className == 'display-none'){//隐藏
  56.              ele.className = 'display-block'
  57.          }else{//显示
  58.              ele.className = 'display-none'
  59.          }
  60.      }
  61.  
  62.      /**
  63.       *visibility属性--方式3
  64.       */
  65.      function fnVisibility(){
  66.          var ele = document.getElementById('visibility');
  67.          var className = ele.className;
  68.          if(className == 'visibility-hidden'){//隐藏
  69.              ele.className = 'visibility-visible'
  70.          }else{//显示
  71.              ele.className = 'visibility-hidden'
  72.          }
  73.      }
  74.  
  75. </script>
  76. </html>

元素隐藏的方式之--hidden，display，visibility的更多相关文章

  1. css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来

    display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...

  2. hidden,display,visibility ,jQuery中的hide()区别

    hidden是html中的属性,规定元素是否可见 display是css中的样式,规定元素是否显示 visible 是css中的样式,规定元素是否可见 display:none ---不为被隐藏的对象 ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：强制元素隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. css元素隐藏（display:none和visibility:hidden）

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  5. CSS隐藏元素的几个方法（display，visibility）的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } ...

  6. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  7. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

  8. CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...

  9. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

随机推荐

  1. xe7android调用webservice

    1.如果用的roservice,那么用builder打开rodl然后直接生成wsdl保存: 2.由系统IDE的Component中调用import WSDL后save as. 3.调用代码: HTTP ...

  2. JavaSE 学习笔记之继承（五）

    继 承(面向对象特征之一) 好处: 1:提高了代码的复用性. 2:让类与类之间产生了关系,提供了另一个特征多态的前提. 父类的由来:其实是由多个类不断向上抽取共性内容而来的. java中对于继承,ja ...

  3. 只读事务（@Transactional(readOnly = true)）的一些概念

    念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必要 ...

  4. LInux下实时网络流量监控工具nload教程

    https://jingyan.baidu.com/article/642c9d340cbef0644a46f72a.html http://blog.csdn.net/u014171641/arti ...

  5. 使用 F# 列表

    使用 F# 列表 在 C# 中使用 F# 的列表,是全然可能的,可是,我建议不要用,由于,仅仅要再做一点,就会使事情在 C# 看来更加自然.比如,把列表转换成数组非常easy.用List.toArra ...

  6. 问题3-Error occurred during initialization of VM Could not reserve enough space for object heap

    初步断定是内存方面的问题 于是决定修改配置文件 D:\study\eclipse\eclipse\eclipse.ini -startupplugins/org.eclipse.equinox.lau ...

  7. jsp:attribute

    在传统 JSP 中,想要实现页面布局管理比较麻烦,为了解决在 JSP 中布局的问题,出现了很多开源软件,比如 Apache Tiles 和 SiteMesh 就是其中比较优秀的.但是使用开源软件实现布 ...

  8. Qt由pcm数据生成wav文件

    void AudioGrabber::saveWave(const QString &fileName, const QByteArray &raw, const QAudioForm ...

  9. JAVA 几种多线程的简单实例 Thread Runnable

    实例1: class Hello extends Thread{ private String name; public Hello(){} public Hello(String name){ th ...

  10. putty和xshell使用和免密登录

    putty和xshell使用和免密登录 XSHELL的设置 事前:我们先去关闭防火墙和selinux 关闭防火墙:   ufw disable 再去看看selinux 一.查看SELinux状态命令: ...