CSS または JavaScript を使用して HTML 内のマークのないテキストを非表示にするにはどうすればよいですか?

HTML 内のマークされていないテキストの非表示

周囲の HTML タグが欠如したテキストを含む HTML コードがある場合があります。このテキストを非表示にすることは、特にテキストを div または他のタグで囲むことが不可能な場合には困難になる可能性があります。 CSS と JavaScript のテクニックを使用して、この問題に対処しましょう。

CSS ハック

解決策の 1 つは、特定の要素の全体的なフォント サイズをターゲットにする CSS ハックを採用することです。

.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 内の 2 番目の段落 (p:nth-child(2)) を選択し、その表示プロパティを に設定します。 "none" は、事実上非表示にします。

CSS と JavaScript のどちらを選択するかは、状況の特定の要件によって異なります。テキストを選択的に非表示にすることが不可欠な場合は、CSS の方が良い選択肢になる可能性があります。一方、特定の条件やユーザーの操作に基づいてテキストを動的に非表示にする必要がある場合は、JavaScript の方が適しています。

以上がCSS または JavaScript を使用して HTML 内のマークのないテキストを非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。