整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。
本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文说的一样，最简单也最粗暴的方法就是设置元素的display属性为none;
display:none;
设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。
另外一种方法是设置元素的visibility属性为hidden。
visibility: hidden
这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。
如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。
设置元素透明度opacity属性为0，也可以隐藏页面元素。
opacity:0
在呈现上与visibility:hidden;方式一样，同样会占据页面空间。
对页面布局的影响主要是看是否会引起浏览器的重汇和重排，对应的差异如下图所示。
页面布局差异
display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
visibility: hidden;的元素不会触发绑定的事件。
opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。
我们可以通过以下的例子来看看。
首先我们定义两个div，分别设置为visibility: hidden;和opacity:0，在两个div上分别绑定一个click事件。
定义div元素
绑定的事件
当我们在两个元素都进行点击时，可以在控制台看到如下输出结果。
结果
从上述结果可以看出和上述结论一致。
display:none;的元素会直接从页面消失，因此定义transition效果完全无效。
visibility:hidden;的元素会在transition设置的时间内消失，但是没有动画效果。
opacity:0;的元素可以和正常元素一样，从页面以动画效果消失。
同样我们可以通过以下这个例子来看看。
首先，我们定义两个div，并设置其transition属性。
div元素
定义transition效果
我们通过将鼠标移至元素上，可以看到两者的差异，从而验证了上述结论的正确性。
本篇文章主要讲解了使用CSS隐藏元素的几种常用方法，并讲解了它们之间的区别，以便大家在特定的场景中进行选择。
CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。
下面就来看看CSS中隐藏元素的方式，以及每种方式的优缺点。
opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。
div {
opacity: 0;
}
div {
filter: opacity(0%);
}
复制代码在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。
注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。
可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：
div {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
}
复制代码这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。
Alpha 通道可以设置为：
transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
复制代码transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。
clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。
div {
clip-path: circle(0);
}
复制代码clip-path为添加动画效果提供了空间，不过它只能在现代浏览器中使用。
visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。
div {
visibility: hidden;
}
复制代码除非使用collapse值，否则元素使用的空间保持不变。
display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。
div {
display: none;
}
复制代码然而，在大多数情况下，display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流，或者采用contain属性，否则它的隐藏过程无法设置动画，并将触发页面重新布局。
可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。
div {
z-index: -1;
}
复制代码position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：
div {
position: absolute;
left: -999px;
}
复制代码通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：
div::after {
position: absolute;
content: '';
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: #fff;
}
复制代码虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。
可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。
div {
height: 0;
padding: 0;
overflow: hidden;
}
复制代码使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。
分类：
2021 年最后一天，疫情还没有完全结束，武汉市政府也取消了跨年活动。今晚，就连地铁都提前到 9 点关闭，大家都在家里跨年。这不，我也在家里跨年。不过我并没有看晚会，而是整理了一篇前端小技巧，算是给自己 2021年一个小小的总结。
用 CSS 隐藏元素有很多种方法，这里介绍 3 种常见的。
特点是【看不见，占空间，摸得着】
特点是【看不见，占空间，摸不着】
特点是【看不见，不占空间，摸不着】
接下来，我们来编写代码验证一下。首先写入三个方块，对中间的橙色方块添加点击事件。代码及页面效果如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 opacity: 0 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.opacity {opacity: 0}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange opacity' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 visibility: hidden 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.visibility {visibility: hidden}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange visibility' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
image
对中间橙色方块添加 display: none 样式，代码及效果如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {width: 200px;height: 50px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.display {display: none}
</style>
</head>
<body>
<div>
<div class='box red'></div>
<div class='box orange display' id="btn"></div>
<div class='box yellow'></div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert('触发点击操作 0.0');
}
</script>
</body>
</html>image
image
本人 2021 年度成就总结：
最后，祝大家元旦快乐～
*请认真填写需求信息，我们会在24小时内与您取得联系。
