【前端小技巧】用CSS隐藏元素的几种方法

本文最后更新于:星期五, 十二月 31日 2021, 10:17 晚上

前言

2021 年最后一天,疫情还没有完全结束,武汉市政府也取消了跨年活动。今晚,就连地铁都提前到 9 点关闭,大家都在家里跨年。这不,我也在家里跨年。不过我并没有看晚会,而是整理了一篇前端小技巧,算是给自己 2021 年一个小小的总结。


正文

用 CSS 隐藏元素有很多种方法,这里介绍 3 种常见的。

opacity: 0

特点是【看不见,占空间,摸得着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的

visibility: hidden

特点是【看不见,占空间,摸不着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

display: none

特点是【看不见,不占空间,摸不着

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

接下来,我们来编写代码验证一下。首先写入三个方块,对中间的橙色方块添加点击事件。代码及页面效果如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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

对中间橙色方块添加 opacity: 0 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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

对中间橙色方块添加 visibility: hidden 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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

对中间橙色方块添加 display: none 样式,代码及效果如下:

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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 年度成就总结:

  1. 学术方面,凭借个人努力,在核酸检测领域产出多份数据真实详尽的报告。
  2. 健康方面,保证膳食纤维摄入,具体表现为每日坚持吃瓜,吃好瓜,吃大瓜。
  3. 商业方面,与各大平台合作,全面参与投资 618、双 11、双 12 等千亿级重大项目。
  4. 环保方面,股票基金一片绿,绿水青山就是金山银山。在废物利用领域更是成绩斐然:自己作为废物,常常被别人利用。
  5. 运动方面,专注于水上项目,在摸鱼、划水等小项上有突出表现。

最后,祝大家元旦快乐~


更多编程教学请关注公众号:潘高陪你学编程

image



本文标题:【前端小技巧】用CSS隐藏元素的几种方法
文章作者:
发布时间:2021年12月31日 - 21:46:22
最后更新:2021年12月31日 - 22:17:47
原始链接:https://blog.pangao.vip/%E3%80%90%E5%89%8D%E7%AB%AF%E5%B0%8F%E6%8A%80%E5%B7%A7%E3%80%91%E7%94%A8CSS%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝