<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签或者内容的隐藏</title>

    <style>

        .display-none{

            display:none;

        }

        .display-block{

            display:inline-block;

        }

        /* visibility属性 */

        .visibility-hidden{

            visibility:hidden;

        }

        .visibility-visible{

            visibility:visible;

        }

    </style>

</head>

<body>

   <h3>1.hidden属性</h3>

   <span id="hidden" hidden>通过hidden属性显示或隐藏</span>

   <span  style="width:30px;height:30px;background-color:pink;" onclick="fnHidden()">hidden属性--点击</span>

    <h3>2.style的display属性</h3>

   <span id="display" class="display-none">通过display属性显示或者隐藏</span>

   <span  style="width:30px;height:30px;background-color:pink;" onclick="fndDisplay()">display属性--点击</span>

   <h3>2.style的display属性</h3>

   <span id="visibility" class="visibility-hidden">visibility属性显示或者隐藏</span>

   <span  style="width:30px;height:30px;background-color:pink;" onclick="fnVisibility()">visibility属性--点击</span>

   <h2 style="color:red;">总结</h2>

       方式1和方式2：隐藏元素不会占位置;<br/>

       方式3，隐藏元素依旧占位子，避免空出位置。

</body>

<script type="text/javascript">

    /**

     *hidden属性应用 --方式1

     */

     function fnHidden(){

         var ele = document.getElementById('hidden');

         var flag = ele.hasAttribute('hidden');//是否有hidden属性

         if(flag){//隐藏

             ele.removeAttribute('hidden');

         }else{//显示

             ele.setAttribute('hidden','hidden');

         }

     }

     /**

      *display属性--方式1

      */

     function fndDisplay(){

         var ele = document.getElementById('display');

         var className = ele.className;

         if(className == 'display-none'){//隐藏

             ele.className = 'display-block'

         }else{//显示

             ele.className = 'display-none'

         }

     }

     /**

      *visibility属性--方式3

      */

     function fnVisibility(){

         var ele = document.getElementById('visibility');

         var className = ele.className;

         if(className == 'visibility-hidden'){//隐藏

             ele.className = 'visibility-visible'

         }else{//显示

             ele.className = 'visibility-hidden'

         }

     }

</script>

</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. 在tomcat上全手工部署Servlet3.0

    从头写java文件的方式,编译成CLASS文件,加强对SERVLET容器的理解. 稍后试试JAR和WAR包. 文件内容(跟以前用IDE的一样): HelloServlet.java: package ...

  2. 继续过Hard题目

    接上一篇:http://www.cnblogs.com/charlesblc/p/6283064.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance ...

  3. 基于ArcGIS Flex API实现动态标绘（1.0）

    标绘作为一种数据展示形式,在多个行业都有需求. 基于ArcGIS Flex API(3.6)实现标绘API,当前版本号1.0 alpha,支持经常使用几种标绘符号,包含: 圆弧.曲线.圆形.椭圆.弓形 ...

  4. [Javascript] 轻量级的JavaScript日期处理类库xDate使用指南

    XDate是一个请谅解的JavaScript的原生Date对象的封装库,提供增强的功能解析,格式化和日期处理.使用起来就和JavaScript自己的对象和方法一样,非常简单. XDate是一个请谅解的 ...

  5. codeforces 708ALetter Cyclic Shift

    2019-05-18 09:51:19 加油,加油,fightting !!! https://www.cnblogs.com/ECJTUACM-873284962/p/6375011.html 全为 ...

  6. 小程序：前端防止用户重复提交&即时消息(IM)重复发送问题解决

    背景: 最近参与开发的小程序,涉及到即时消息(IM)发送的功能: 聊天界面如下,通过键盘上的[发送]按钮,触发消息发送功能 问题发现: 功能开发完毕,进入测试流程:测试工程师反馈说: 在Android ...

  7. [Luogu1273] 有线电视网

    [Luogu1273] 有线电视网 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树 ...

  8. WPF MVVM 关闭窗体

    由于程序采用MVVM模式同时有些操作需要单独窗口来进行处理.因此就会产生窗口关闭问题, 由于是MVVM和需要操作弹出窗口中操作的内容因此就需要在mvvm进行统一处理. 网上查了几种方法采用其中一种 不 ...

  9. lhgdialog.js弹出框

    官方学习网址: http://www.lhgdialog.com/ 个人认为它的样式不太好调,除此之外它也是一款实用的弹出框,专业的用来提示文字,消息,按钮添加function().ifame: 以下 ...

  10. unity3d 鼠标事件

    using UnityEngine; using System.Collections; public class mouse : MonoBehaviour { //private Vector3 ...