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. orcale 日期显示格式化

    SQL> select * 2 from emp 3 where hiredate='1987-11-17'; where hiredate='1987-11-17' * 第 3 行出现错误: ...

  2. /tmp目录下执行脚本失败提示Permission denied

    Linux上执行Shell脚本运行失败提示Permission denied一个问题,挺好的问题,切中了知识盲点. 问题现象 Shell脚本在/tmp目录下,执行./test.sh运行失败,提示Per ...

  3. Shallow Heap 和 Retained Heap的区别

    http://blog.csdn.net/a740169405/article/details/53610689 Shallow Heap 和 Retained Heap的区别 https://i.c ...

  4. 【cl】Unable to find executable for: taskkill

    十二月 02, 2015 5:16:56 下午 org.openqa.selenium.os.ProcessUtils killWinProcess警告: Process refused to die ...

  5. 黑马day01 笔记

    一.xml语法   1.文档声明     用来声明xml的基本属性,用来指挥解析引擎怎样去解析当前xml     通常一个xml都要包括而且仅仅能包括一个文档声明     xml的文档必须在整个xml ...

  6. 杂项：DS（目录服务）

    ylbtech-杂项:DS(目录服务) 1.返回顶部 1. DS(目录服务). 目录服务管理概述: 目录服务是扩展计算机系统中最重要的组件之一.虽然用户和管理通常不知道他们感兴趣对象的确切名称,但他们 ...

  7. 基于Spring boot的web项目搭建教程（一）

    前言: 本教程参考了大量前辈的代码,在此不方便一一列举.本教程使用IDEA开发工具搭建项目,对于本人的IDEA已经集成了某些插件,比如Lombok,Thymeleaf,yml等插件,这些插件不在文中提 ...

  8. 下载jdk12版本没有jre问题处理

    以往下载jdk1.6版本直接运行会生成jdk,jre两个文件,但今天下载jdk12运行后,只有jdk目录文件,并没有jre后来在网上查找后通过命令行方式手动生成jre 1.下载jdk12 网址:htt ...

  9. Citrix架构

    本图为citrix在Azure上的基本架构 包含了netscaler, VDA, DDC, AD四台服务器以及Azure SQL服务

  10. numpy快速指南

    Quickstart tutorial 引用https://docs.scipy.org/doc/numpy-dev/user/quickstart.html Prerequisites Before ...