「前端小技巧」用CSS隱藏元素的幾種方法

言

2021 年最后一天，疫情還沒有完全結束，武漢市政府也取消了跨年活動。今晚，就連地鐵都提前到 9 點關閉，大家都在家里跨年。這不，我也在家里跨年。不過我并沒有看晚會，而是整理了一篇前端小技巧，算是給自己 2021年一個小小的總結。

正文

用 CSS 隱藏元素有很多種方法，這里介紹 3 種常見的。

opacity: 0

特點是【看不見，占空間，摸得著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

visibility: hidden

特點是【看不見，占空間，摸不著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

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;}
        </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

opacity: 0

對中間橙色方塊添加 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

visibility: hidden

對中間橙色方塊添加 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

display: none

對中間橙色方塊添加 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

結尾

本人 2021 年度成就總結：

學術方面，憑借個人努力，在核酸檢測領域產出多份數據真實詳盡的報告。
健康方面，保證膳食纖維攝入，具體表現為每日堅持吃瓜，吃好瓜，吃大瓜。
商業方面，與各大平臺合作，全面參與投資 618、雙 11、雙 12 等千億級重大項目。
環保方面，股票基金一片綠，綠水青山就是金山銀山。在廢物利用領域更是成績斐然：自己作為廢物，常常被別人利用。
運動方面，專注于水上項目，在摸魚、劃水等小項上有突出表現。

最后，祝大家元旦快樂～

1）定義n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

（2）定義自加按鈕，展示n的值，和判斷結果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show進行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進行條件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if進行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進行條件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else進行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進行條件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if進行條件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
</template>

執行結果

筆記分享

<pre v-show="true">
    條件渲染：
    1、v-if
        寫法：
            （1）v-if = "表達式"
            （2）v-else-if = "表達式"
            （3）v-else = "表達式"
        適用于：切換頻率較低的場景
        特點：不展示的DOM元素將被直接刪除
        注意：v-if和v-else-if、v-else一起使用的時候，要求結構不可以被打斷
    2、v-show
        寫法：v-show = "表達式"
        適用于：切換頻率較高的場景
        特點：不展示的DOM元素未被移除，使用樣式進行隱藏
    3、備注
        使用v-if時，元素可能無法獲取到，使用v-show是可獲取到的
    4、使用template v-if
        寫的時候template對內容進行了包裹，
        等最終頁面渲染的時候，將把template標簽刪掉，
        這也就是說不破壞原來的樣式。
        但是template只能配合v-if進行使用。
</pre>

源碼截圖

TML本身并不能完全防止用戶復制內容，因為HTML是一種標記語言，它只負責定義網頁的結構和內容，而不涉及用戶的行為。但是，您可以使用一些技術來防止用戶復制您的網頁內容，例如：

1. 禁用右鍵菜單：您可以使用JavaScript代碼來禁用右鍵菜單，這樣用戶就無法使用右鍵菜單復制您的內容。但是，這種方法并不可靠，因為用戶仍然可以使用其他方法來復制內容。

2. 使用CSS樣式：您可以使用CSS樣式來隱藏您的內容，例如將文本顏色設置為與背景顏色相同，這樣用戶就無法看到您的內容，也就無法復制。但是，這種方法可能會影響您網頁的可讀性和可訪問性。

3. 使用JavaScript代碼：您可以使用JavaScript代碼來防止用戶復制您的內容，例如在用戶嘗試復制時彈出警告框或禁用復制功能。但是，這種方法可能會影響用戶體驗，并且用戶仍然可以通過其他方法來復制內容。

總之，HTML本身并不能完全防止用戶復制內容，但是您可以使用一些技術來增加復制的難度。但是，這些技術可能會影響您網頁的可讀性和可訪問性，因此需要謹慎使用。

在線咨詢

上一篇：HTML字間距如何設置？#html
下一篇：web前端培訓：什么是語義HTML標記以及如何使用它們？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「前端小技巧」用CSS隱藏元素的幾種方法

言

正文

opacity: 0

visibility: hidden

display: none

opacity: 0

visibility: hidden

display: none

結尾

1、v-show

2、v-if

3、v-if v-else-if v-else

4、template

您的項目需求