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. 学习EXTJS6（4）基本功能-信息提示框组件

    1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...

  2. （15）Spring Boot使用Druid和监控配置【从零开始学Spring Boot】

    Spring Boot 系列博客] 更多查看博客:http://412887952-qq-com.iteye.com/blog Spring Boot默认的数据源是:org.apache.tomcat ...

  3. HDU - 1043 - Eight / POJ - 1077 - Eight

    先上题目: Eight Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  4. 【ACM】hdu_zs3_1003_绝对值排序_201308100742

    绝对值排序 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other)Total Submissi ...

  5. 【cl】多表查询（内、外连接）

    交叉连接(cross join):该连接产生的结果集笛卡尔积 a有7行,b有8行    a的第一行与b的每一行进行连接,就有8条a得第一行 7*8=56条 select a.real_name,s.u ...

  6. 在Android系统中添加宏控制代码【原创】

    关键词:Android  宏控制 Androd.mk 平台信息:内核:linux3.4.39 系统:android/android5.1平台:S5P4418  作者:庄泽彬(欢迎转载,请注明作者) 邮 ...

  7. STEM教育是什么？

    STEM教育是什么? STEM 是Science科学.Technology技术.Engineering工程.Math数学,这4个词的开头字母的组合.所以STEM教育就是结合科学.技术.工程.数学的跨领 ...

  8. [BZOJ 3387] Fence Obstacle Course

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3387 [算法] f[i][0]表示从第i个栅栏的左端点走到原点的最少移动步数 f[i ...

  9. SimpleMappingExceptionResolver异常映射

    转自:https://blog.csdn.net/qqqqqq654/article/details/65767701 SimpleMappingException异常映射 当异常发生时,我们可以将它 ...

  10. navicat数据库同步

    10.168.95.246