CSS隐藏元素的方法及区别

1.opacity

opacity:0将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它会响应用户交互。

2.visibility 

visibility:hidden将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它不会响应用户交互。如果想让子元素显示,则设置子元素的visibility:visibility;

3.display

display:none使用这个属性,被隐藏的元素对网页的布局不起作用。不仅如此,一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

4.position

position:absolute 将top和left设置成足够大的负数,相当于把元素放到可视区域外,它不会影响布局,能够让元素保持可操作性,在读屏软件上可以被识别。

总结一下:opacity,visibility影响布局,前者不影响交互,后者影响交互;

display不影响布局,影响交互;

position 不影响布局,不影响交互;

下面给出例子:可以自行调试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 200px;  height: 200px;  background-color: #B4B4B4;  opacity:0;
        }
        .div2 {  width: 200px;  height: 200px;  background-color: goldenrod;  visibility: hidden;
        }
        .div2-2 {  width: 100px;  height: 100px;  background-color: lightsalmon;  visibility: visible;
        }
        .div3{  width: 200px;  height: 200px;  background-color: green; display: none;
        }
        .div4 {  width: 200px;  height: 200px;   background-color: greenyellow; position: absolute;  top:-99em;  }
    </style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2<div class="div2-2">2-2</div></div>
<div class="div3">3</div>
<div class="div4">4</div>
<script>
    var div1 = document.querySelector(".div1");
    var div2 = document.querySelector(".div2");
    var div3 = document.querySelector(".div3");
    var div4 = document.querySelector(".div4");

    div1.οnclick=function () {
        alert("div2");
    };
    div2.οnclick=function () {
        alert("div2");
    };
    div3.οnclick=function () {
        alert("div3");
    };
    div4.οnclick=function () {
        alert("div4");
    };
</script>

</body>
</html>

原文链接:https://blog.csdn.net/wsymcxy/article/details/82735743

5.通过z-index隐藏

<style>div{    z-index:-9999;
}</style>

链接:http://www.imooc.com/article/76214
来源:慕课网

原文地址:https://www.cnblogs.com/psxiao/p/11600750.html

时间: 2024-09-30 07:05:41

CSS隐藏元素的方法及区别的相关文章

css隐藏元素的方法何区别

前言 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.下面我的这篇文章就给大家解说一下他们之间的区别吧,让大家能根据场合来选择适合的方式. Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消

css隐藏元素的方法

1. display:none 去除元素位置: 造成回流.重绘: 元素都没有了,自然无法触发时事件了: 2. visibility:hidden 元素存在且大小不变,只是没有渲染: 造成重绘: 元素绑定的事件不会触发了: 3. opacity:0 全透明: 元素存在且大小不变,只是没有渲染: 造成重绘: 元素绑定的事件依然会触发: 4. transorm:scale(0) 缩放缩为最小: 元素存在,大小为0*0: 造成回流.重绘: 5. position:absolute; top:-999em

CSS隐藏元素的几种方法

使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析,不能点击,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2.visibility:hidden 使用 visibility:hidden 隐藏的元素,不能点击,但是会占据文档空间,不够灵活,一般配合 posi

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

一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同.除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!! 几种方法的简单介绍 首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧. display:n

CSS 隐藏元素的八种方法

前言 总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 原文博客地址:从隐藏元素谈起 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) 博主博客地址:Damonare的个人博客 念念不忘,必有回响;有一口气,点一盏灯. 正文 说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种隐藏元素的方法,总结如下: 1 div{ 2 3 overflow:hidden 4 opacity:0: 5 visibility:hidd

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

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1.display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间.GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题. 2.visibility:hidden; 和disp

隐藏元素的方法,都有啥区别?

前言 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.下面我的这篇文章就给大家解说一下他们之间的区别吧,让大家能根据场合来选择适合的方式. Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消

CSS隐藏元素的五种方法

1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将display属性设为none确保元素不可见并且连盒模型也不生成.使用这个属性,被隐藏的元素不占据任何空间.不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效.此外,读屏软件也不会读到元素的内容.这种方式产生的效果就像元素完全不存在. 任何这个元素的子孙元素也会被同时隐藏.为

div css隐藏内容样式方法

一.使用css隐藏方法用到CSS样式单词及对应解释 1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看2.使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐,css overflow手册查看3.使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,css overflow-y手册查看,css手册查看overflow-x 1.css隐藏DIV及内容,完全隐藏内容与布局 解释:使用CSS单