首頁 >web前端 >js教程 >如何使用 CSS 或 JavaScript 隱藏 HTML 中未標記的文字?

如何使用 CSS 或 JavaScript 隱藏 HTML 中未標記的文字?

Barbara Streisand
Barbara Streisand原創
2024-11-30 04:13:14785瀏覽

How Can I Hide Unmarked Text in HTML Using CSS or JavaScript?

隱藏 HTML 中未標記的文字

您可能會遇到 HTML 程式碼中的文字缺少任何周圍 HTML 標籤的情況。隱藏此文字可能具有挑戰性,尤其是在無法使用 div 或其他標籤包裹文字的情況下。讓我們使用 CSS 和 JavaScript 技術來解決這個問題。

CSS Hack

一種解決方案是採用針對特定元素的整體字體大小的CSS hack:

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

在此程式碼中,.entry 元素的字體大小被指定為0,從而有效隱藏其中的所有文字。但是,如果您希望 .entry 中的其他元素保留其原始字體大小,則這可能是不可取的。若要選擇性地隱藏特定文本,您可以新增巢狀選擇器:

.entry .hidden-text {
  font-size: 0;
}

此方法僅針對並隱藏具有 .hidden-text 類別的元素。

JavaScript

或者,您可以使用 JavaScript 動態操作 DOM 並實現所需的結果。例如,您可以使用下列JavaScript 程式碼:

document.querySelector("div.entry p:nth-child(2)").style.display = "none";

在此程式碼中,我們選擇.entry div 中的第二段(p:nth-child(2)) 並將其顯示屬性設為“無”,有效地隱藏它。

CSS 和 JavaScript 之間的選擇取決於您情況的特定要求。如果必須選擇性地隱藏文本,那麼 CSS 可能是更好的選擇。另一方面,如果您需要根據某些條件或使用者互動動態隱藏文本,那麼 JavaScript 更合適。

以上是如何使用 CSS 或 JavaScript 隱藏 HTML 中未標記的文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn