聊聊 CSS 隱藏元素的 10 種實用方法

SS 隱藏元素的方法你能說出來幾種？

這是一個在 web 前端面試中常會提及的基礎問題，聊這個話題不僅僅只是討論“茴”字有幾種寫法，更是能從一個簡單的問題中體現出你的 CSS 邊界能力，本文提煉了十種最實用的方法，希望對你有所幫助。

常規方法

display: none;

結構消失，會觸發回流重繪（Reflow & Repaint）。

opacity: 0;

結構保留，占據空間，可以正常觸發事件，因觸發硬件加速所以不發生回流和重繪。

visibility: hidden;

結構保留，占據空間，僅觸發重繪，不會觸發事件（無法選中）。

content-visibility: hidden;

設置元素內容可見性，設置的元素本身不受影響。hidden 隱藏效果與 display: none 類似，但實際瀏覽器只是跳過了內容的渲染，還保留著內容的渲染狀態，性能上有優勢。

注意：該屬性目前還處于實驗性階段，使用時需要考慮瀏覽器兼容性問題。

逃逸視窗

position+left/top

利用絕對定位 position 設置 absolute 或 fixed，同時 left 或 top 設置 -9999px；

超大負邊距會將元素拋出視圖，因為定位本身脫離了文檔流所以不占據空間。

translate(-9999px)

利用偏移拋出視圖，空間會占據，不過元素實際不在視窗內所以無法交互。

transform: translate(-9999px);

注意：此方法對行內元素無效！

這兩種方法并不使元素本身消失，只是看不見了而已。

移行變換

scale(0) / skew(90deg)

通過2D變換來達到隱藏，占據空間，不可交互。

transform: scale(0);

transform: skew(90deg);

注意：此方法對行內元素無效！

circle(0px)

利用裁剪創建元素的可顯示區域，區域外會隱藏，占據空間，不可交互（這里我用 circle 是因為它參數最少）

clip-path: circle(0px);

z-index

層疊上下文在合適的情況下可以遮擋住元素，也算是一種隱藏方式。

壓縮空間

height: 0; width: 0;

寬高都為 0 時不占據空間，不可交互。需要處理邊距等樣式，還需設置 overflow: hidden; 否則子元素可能不會隱藏，注意還會被display影響，所以這個方法本身并不實用，但是可以充分體現對盒模型的理解。

width: 0;
height: 0;
padding: 0;
margin: 0;
border: none;
overflow: hidden;

總結

或許還有其它“障眼法”可以讓元素不可見，以上整理的十種方法都獨具代表性，且比較實用。

以上就是文章的全部內容，感謝看到這里！本人知識水平有限，如有錯誤望不吝指正，如果覺得寫得不錯，對你有所幫助或啟發，可以點贊收藏支持一下，也歡迎關注，我會更新更多實用的前端知識與技巧。我是茶無味de一天(公眾號: 品味前端)，希望與你共同成長~

現實中，我們時常需要在網頁中展示你的聯系方式，其中Email郵件地址通常需要提供在頁面上。但是在網絡機器人泛濫的互聯中，如果直接顯示你郵件，則很可能被他們識別并拷貝，然后對你的郵件地址實施郵件轟炸。為了避免這個問題，需要利用技術手段來保護你的地址，使其只能被人眼看到，并且支持直接鏈接發送郵件，但是不能被網絡機器人識別到，一般常用的方法是通過JS，Html，CSS對地址隱藏，但是編寫代碼有點繁瑣，可能還要引入額外的JS庫才能實現，而且還有一個缺點就是對一些限制級別的設備上，瀏覽器可能會禁用掉JS功能，這樣會導致頁面不能正常工作。此處給大家介紹一種基于SVG方法的郵件地址保護技術，可以極大程度的保護你免受機器人騷擾以及保證在瀏覽器禁用JS情況下仍然可以正常工作。

優點

在JavaScript禁用的情況下工作

主要優點這種基于SVG的電子郵件保護方法沒有用的任何的JavaScript代碼。

因此，即使訪問者瀏覽器禁用了JavaScript，頁面上顯示的電子郵件地址仍然可用、可訪問和受到保護，同時保持安全并免受垃圾郵件機器人的攻擊。

允許標準mailto:鏈接

與其他不需要JavaScript的方法（例如，通過插入不可見的HTML注釋或插入可見元素并隨后通過CSS隱藏它們來混淆電子郵件地址）不同，這基于SVG的方法允許標準 mailto:鏈接。主要區別是：mailto:鏈接存在于外部 SVG文檔內部，而不是內部引用的HTML文檔。

像圖像一樣隱藏內容，像文本一樣可復制

第三個優點是嵌入式SVG類似于圖像，但不是圖像。作為嵌入超文本文檔中的替換元素，SVG可以像圖像一樣有效地隱藏垃圾郵件地址的電子郵件地址。

但嚴格來說，SVG是圖形文檔，而非實際圖像。

因此，與圖像不同，人類訪問者仍然可以通過右鍵單擊電子郵件地址來復制電子郵件地址 <text>嵌入SVG中的元素。這對于傳統圖像方法來說，無法多做到手動復制地址（但是可以使用圖像文本識別OCR技術來實現）。

基本方法

我們以一個最簡單的Emil鏈接地址共享為例。示例中由兩個兩個文件組成：其中SVG圖形文檔通過<object>標簽方式嵌入到主HTML頁面中，基本語法如下：

注意，同一個SVG圖形文檔支持在多個地方，進行嵌入。主頁面HTML（main.htm）源代碼如下，一個很簡單的頁面：

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>SVG Email Protection</title>
<style>
.cc {
width: 180px;
height: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>請郵件聯系我: <object class="cc" data="svg-email-protection.svg" type="image/svg+xml"></object></p>
</body>
</html>

SVG文檔（svgprot-chongchong）代碼：

<svg xmlns="http://www.w3.org/2000/svg"
lang="en-GB"
aria-labelledby="title"
viewBox="0 0 200 24">
<title id="title"> SVG Email Protection</title>
<defs>
<style type="text/css"><![CDATA[
rect {
width: 200px;
height: 24px;
fill: rgb(255, 255, 255);
}
a:focus rect,
rect:hover {
rx: 4px;
ry: 4px;
fill: rgb(0, 0, 255);
}
text {
font-size: 16px;
fill: rgb(0, 0, 255);
pointer-events: none;
}
a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}
]]></style>
</defs>
<a href="mailto:chongchong[at]ijz.me" aria-label="點擊發郵件">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"> chongchong[at]ijz.me</text>
</a>
</svg>

將以上兩個文件放到同意目錄，然后用瀏覽器打開主頁面main.hm就可以看到效果了

總結

本文給大家介紹了一種基于SVG文檔的優雅的郵件保護方法，可以極大的免受網絡機器人竊取你的郵件地址進行騷擾攻擊，同時支持emailto鏈接，支持無JS瀏覽器下正常工作，支持手動郵件復制等優點，當然該方法也是只能抵擋一般性規模化工作的Web機器人攻擊，如果遇到高級機器人，比如可以模仿真人訪問行為的，可以分析語法找到SVG文件進行獲取地址的高級機器人則無防御能力。

覽器加載一個js腳本，會在devtools中留下各種痕跡，elements中的script元素，console中的日志，source中的代碼，network中的網絡請求等

elements

這個比較簡單，插入js的時候設置好id，在js中刪掉自身就好了

<script id="xxx">
    // todo
    document.getElementById("xxx").remove();
</script>

對于引用js

<script id="xxx" src="a.js"></script>

// a.js
document.getElementById("xxx").remove()

對于動態加載的js也是一樣的

<script>
    let e=document.createElement("script");
    e.id="xxx";
    e.src="a.js";
    document.head.appendChild(e);
</script>

// a.js
document.getElementById("xxx").remove()

或者也可以這樣

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
    e.remove();
</script>

雖然看起來很奇怪，但a.js確實能執行，似乎是加載a.js時阻塞了腳本執行，執行完a.js之后再remove

console

clear就好了

console.clear()

source

直接引用和動態加載都會在source中出現

<script src="a.js"></script>

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
</script>

這樣都是不行的，經過測試發現動態插入js代碼時不會被記錄在source中

<script>
    fetch("a.js").then(resp=> {
        return resp.text()
    }).then(text=> {
        let e=document.createElement("script");
        e.innerHTML=text;
        document.head.appendChild(e);
    })
</script>

這樣a.js就不會出現在source里了

network

常規HTTP/WebSocket都會被記錄，無法繞過，但是WebRTC不會，WebRTC可以基于UDP/TCP傳輸，WebRTC提供createDataChannel API，可以用于傳輸文本，那么就可以實現network隱藏加載

考慮WebRTC需要傳遞offer和icecandidate，還是得通過HTTP/WebSocket傳輸，而且復雜網絡環境下還需要使用或部署STUN/TURN服務器，穩定性有待考慮

WebRTC技術可以參考學習我最近看的幾篇文章透明日報20200801期

其他的方法我還沒有找到，技術不行就社會工程

一個思路是可以偽裝成其他流量混過去，比如png

<script>
    fetch("a.png").then(resp=> {
        return resp.text()
    }).then(text=> {
        let e=document.createElement("script");
        e.innerHTML=text;
        document.head.appendChild(e);
    })
</script>

然后在delvtools里也看不出來

另外一個思路是devtools目前只在打開的時候記錄network數據，那么只要在devtools關閉的時候加載資源，打開就不加載，這樣就不會出現在network里了

新的問題又出現了，如何檢測devtools的狀態，網上已經有不少公開技巧了

https://github.com/sindresorhus/devtools-detect

https://github.com/AEPKILL/devtools-detector

最后

還可以在哪里找到加載和執行痕跡呢

還有什么方法可以隱藏這些痕跡呢

如果你現在也想學習前端開發技術，在學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的Q群:前114中6649后671還有大牛整理的一套高效率學習路線和教程與您免費分享，還有許多大廠面試真題。希望能夠對你們有所幫助。

在線咨詢

上一篇：Servlet 自動刷新頁面
下一篇：推薦12個非常優秀的跨平臺桌面開源項目

您的項目需求

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

整合營銷服務商