CSS隐藏元素的方法和区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <style type="text/css">

    </style>

</head>

<body>

    <button id="btn" onclick="cl()">

        点我

    </button>

</body>

<script type="text/javascript">

    var flag = true;

    function cl() {

        if(flag){

            //visibility是隐藏了元素(保留了原来的占位)，并且不能再交互

            document.getElementById('btn').style.visibility = 'hidden';

            //display是从html去除了元素，不再占位，更别提交互的事

            document.getElementById('btn').style.display = 'none';

            //opacity就是骗你的，你看上不见是因为隐形了，其实它还在那里，不离不弃(占位且不影响交互)

            document.getElementById('btn').style.opacity = 0;

            flag = false;

        }else{

              document.getElementById('btn').style.visibility = 'visible';

              document.getElementById('btn').style.display = 'block';

              document.getElementById('btn').style.opacity = 1;

              flag = true;

        }

    }

</script>

</html>

【前端】CSS隐藏元素的方法和区别的更多相关文章

  1. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

  2. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

  3. CSS“隐藏”元素的几种方法的对比

    本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...

  4. css隐藏元素的六类13种方法

    隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...

  5. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  6. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  7. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  8. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  9. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

随机推荐

  1. 一些诗词摘抄qwq

    声明: 有些违规内容就删掉了--大家都能理解吧qwq 雾失楼台,月迷津渡,桃源望断无寻处.可堪孤馆闭春寒,杜鹃声里斜阳暮.--秦观<踏莎行·郴州旅舍> 郴江幸自绕郴山,为谁流下潇湘去?-- ...

  2. jquery怎样获取多个复选框的值？

    jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));    ...

  3. EF--code first数据迁移命令

    原文推荐!点我点我! 添加Migrations文件夹,并生成类文件Configuration.cs PM> Enable-Migrations -EnableAutomaticMigration ...

  4. Vijos——T 1092 全排列

    https://vijos.org/p/1092 描述 输入两个自然数m,n 1<=n<=20,1<=m<=n!输出n个数的第m种全排列. 如 :输入 3 1输出 1 2 3 ...

  5. Spring MVC-页面重定向示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_page_redirection.htm 说明:示例基于Spring MVC 4. ...

  6. CSDN日报20170423 ——《私活，永远挽救不了自己屌丝的人生！》

    [程序人生]私活,永远挽救不了自己屌丝的人生! 作者:北漂周 大多数接私活的人.是压根不知道下班后的时间他能够干什么!看剧?追星?逛街?当然,与这些对照,私活是一个更好的选择. 假设有这个时间,为什么 ...

  7. C++一些知识难点

    什么是"引用"?申明和使用"引用"要注意哪些问题? 答:引用就是某个目标变量的"别名"(alias).相应用的操作与对变量直接操作效果全然同 ...

  8. Running the app on your device

    So far, you've run the app on the Simulator. That's nice and all but probably notwhy you're learning ...

  9. oc24--description

    // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject { int _age; double ...

  10. “Parsing filters unsupported” error during extraction of RAR file

    up vote 159 down vote accepted You can use: sudo apt-get install unrar or sudo apt-get install unar ...