css隐藏元素 触发点击事件,CSS隐藏元素的方法及区别

一、常用方法的性能及区别

1.display:none

不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。具体表现如下：

1.DOM结构，浏览器不会渲染display:none的元素，不占据空间；

2.事件监听：无法进行DOM事件监听；

3.性能：动态改变此属性会引起重排，性能较差；

4.继承：不会被子元素继承，毕竟子类也不会渲染；

5.transition：transition不支持display。

2.visibility: hidden

使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。具体表现如下：

1.DOM结构：被渲染，但是被隐藏，会占据空间；

2.事件监听：无法进行DOM事件监听；

3.性能：动态改变此属性会引起重绘，性能较高；

4.继承：会被子元素继承，子元素可以通过设置visibility:visible来取消隐藏；

5.transition：visibility会立即显示，隐藏时会延时。

3.opacity: 0

与visibility: hidden相似，使对象在网页上不可见，但该对象在网页上所占的空间没有改变，但是可以进行DOM事件监听，visibility：hidden不可以,通俗来说就是看不见但是摸得着。具体表现如下：

1.DOM结构：透明度为100%，元素被隐藏，会占据空间；

2.事件监听：可以进行DOM事件监听；

3.性能：提升为合成层，不会引起重绘，性能较高；

4.继承：会被子元素继承，子元素并不能通过opacity:1来取消隐藏；

5.transition：opacity可以延迟显示和隐藏。

二、结合代码与页面解释

CSS隐藏元素的方法及区别

div {

width: 100px;

height: 100px;

background-color: rebeccapurple;

}

.div1 {

display: none;

}

.div2 {

visibility: hidden;

}

.div3 {

opacity: 0;

}

function test(data) {

alert(data)

}

1、不添加隐藏方式

不添加隐藏

2、display:none

未保留物理空间，无法进行事件监听

display:none

3、visibility: hidden

保留物理空间，无法进行事件监听

visibility: hidden

4、opacity: 0

保留物理空间，可以进行事件监听

opacity: 0

opacity: 0

三、隐藏的拓展方法

(1)position

position:absolute 设置元素的position与left，top，bottom，right等，将元素移出至可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。

(2)transform

transform:rotatex(90deg)或 transform:rotateY(90deg)，与opacity: 0相似，但无法进行事件监听。

(3)通过z-index隐藏