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. Spring Boot错误：Unable to start embedded container...的问题解决

    解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...

  2. VMware 12安装CentOS 6.9时出现：The centos disc was not found in any of your drives.Please insert the centos disc and press OK to retry

    错误: The centos disc was not found in any of your drives.Please insert the centos disc and press OK t ...

  3. UVa Problem 10051

    这题有点类似LIS,由于颜色最多100种,所以只需建立一个100的数组,按对立面的关系以某种颜色为向上面的最大值就可以了.   #include <iostream> #include & ...

  4. 使用enca进行字符集转码

    在linux进行开发与运维的时候,我们常常遇到字符编码的问题,系统字符设置.vimrc fileencoding设置.终端设置往往搞的晕头转向,当一个文件出现乱码的时候,我们通常不能识别它是什么编码的 ...

  5. 【cl】sikuli下载安装

    前提条件: 1.请确保你已经安装java 6 JRE 32位版本(如果是java 7 或者是64位JRE 那是不被支持的) 2.请确定你已经卸载的先前的sikuli版本(尤其是0.10.x版本) 3. ...

  6. HDU3535 AreYouBusy 混合背包

    题目大意 给出几组物品的体积和价值,每组分为三种:0.组内物品至少选一个:1.组内物品最多选一个:2.组内物品任意选.给出背包容量,求所能得到的最大价值. 注意 仔细审题,把样例好好看完了再答题,否则 ...

  7. 【POJ 3700】 Missile Defence System

    [题目链接] http://poj.org/problem?id=3700 [算法] 对于每一枚导弹,有4种决策 : 1.新建一套递增的系统拦截它 2.新建一套递减的系统拦截它 3.在已经建好的递增拦 ...

  8. 【NOIP 2009】 Hankson的趣味题

    [题目链接] https://www.luogu.org/problemnew/show/P1072 [算法] x是b1的约数 筛出b1的约数,判断是否符合条件即可 [代码] #include< ...

  9. [HTML5] 新标签解释及用法

    转自:http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html HTML 5 是一个新的网络标准,目标在于取代现有的 HT ...

  10. Object源码分析（一）

    刚注册博客,准备学习一下java源码,当然首先从Object看起. 介绍一下Object: Object是所有类层次结构的根,所有的类都将Object作为超类.所有的对象,包括数组,都实现了Objec ...