前言
2021 年最后一天抗愁，疫情還沒有完全結(jié)束，武漢市政府也取消了跨年活動呵晚。今晚蜘腌，就連地鐵都提前到 9 點關(guān)閉，大家都在家里跨年饵隙。這不撮珠，我也在家里跨年。不過我并沒有看晚會金矛，而是整理了一篇前端小技巧芯急，算是給自己 2021 年一個小小的總結(jié)。
正文
用 CSS 隱藏元素有很多種方法驶俊，這里介紹 3 種常見的娶耍。
opacity: 0
特點是【看不見，占空間饼酿，摸得著】
- 元素隱藏
- 不改變布局
- 如果綁定了事件榕酒，點擊該區(qū)域胚膊，是可以觸發(fā)事件的
visibility: hidden
特點是【看不見，占空間想鹰，摸不著】
- 元素隱藏
- 不改變布局
- 如果綁定了事件紊婉，點擊該區(qū)域，是無法觸發(fā)事件的
display: none
特點是【看不見辑舷，不占空間喻犁，摸不著】
- 元素隱藏
- 改變布局
- 如果綁定了事件，點擊該區(qū)域何缓，是無法觸發(fā)事件的
接下來肢础，我們來編寫代碼驗證一下。首先寫入三個方塊碌廓，對中間的橙色方塊添加點擊事件乔妈。代碼及頁面效果如下所示：
<!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('觸發(fā)點擊操作 0.0');
}
</script>
</body>
</html>
【前端小技巧】用CSS隱藏元素的幾種方法-1.png
【前端小技巧】用CSS隱藏元素的幾種方法-2.png
【前端小技巧】用CSS隱藏元素的幾種方法-3.gif
opacity: 0
對中間橙色方塊添加 opacity: 0 樣式，代碼及效果如下：
- 元素隱藏
- 不改變布局
- 如果綁定了事件氓皱，點擊該區(qū)域，是可以觸發(fā)事件的
<!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('觸發(fā)點擊操作 0.0');
}
</script>
</body>
</html>
image
image
【前端小技巧】用CSS隱藏元素的幾種方法-6.gif
visibility: hidden
對中間橙色方塊添加 visibility: hidden 樣式勃刨，代碼及效果如下：
- 元素隱藏
- 不改變布局
- 如果綁定了事件波材，點擊該區(qū)域，是無法觸發(fā)事件的
<!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('觸發(fā)點擊操作 0.0');
}
</script>
</body>
</html>
image
image
image
display: none
對中間橙色方塊添加 display: none 樣式身隐，代碼及效果如下：
- 元素隱藏
- 改變布局
- 如果綁定了事件廷区，點擊該區(qū)域，是無法觸發(fā)事件的
<!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('觸發(fā)點擊操作 0.0');
}
</script>
</body>
</html>
image
image
結(jié)尾
本人 2021 年度成就總結(jié)：
- 學(xué)術(shù)方面贾铝，憑借個人努力隙轻，在核酸檢測領(lǐng)域產(chǎn)出多份數(shù)據(jù)真實詳盡的報告。
- 健康方面垢揩，保證膳食纖維攝入玖绿，具體表現(xiàn)為每日堅持吃瓜，吃好瓜叁巨，吃大瓜斑匪。
- 商業(yè)方面，與各大平臺合作锋勺，全面參與投資 618蚀瘸、雙 11、雙 12 等千億級重大項目庶橱。
- 環(huán)保方面贮勃，股票基金一片綠，綠水青山就是金山銀山苏章。在廢物利用領(lǐng)域更是成績斐然：自己作為廢物寂嘉，常常被別人利用奏瞬。
- 運動方面，專注于水上項目垫释，在摸魚丝格、劃水等小項上有突出表現(xiàn)。
最后棵譬，祝大家元旦快樂～
WechatIMG2163.jpeg
