CSS と JavaScript を使用して Web コンテンツ内の個々の文字のスタイルを設定するにはどうすればよいですか?

CSS を使用して特定の文字の外観をカスタマイズする

CSS を使用して個々の文字をターゲットにすることは、非現実的な願望のように思えるかもしれません。ただし、特に JavaScript と組み合わせた場合に、この効果を実現するための巧妙な回避策があります。

段落内の文字「z」のすべてのインスタンスを赤色で強調表示するシナリオを考えてみましょう。または、楽譜のコンテキストでは、「chord」クラスに属する要素内のすべての上付き文字「7」を垂直方向に整列させたい場合があります。

純粋な CSS はこの課題に直接対処できませんが、ハイブリッド アプローチは可能です。満足のいく解決策を提供します。次のコードは、これを実現する方法を示しています。

CSS

span.highlight {
  background: #F60;
  padding: 5px;
  display: inline-block;
  color: #FFF;
}

p {
  font-family: Verdana;
}

HTML

<p>
  Let's go Zapata let's do it for the revolution, Zapatistas!!!
</p>

JavaScript

jQuery.fn.highlight = function(str, className) {
  var regex = new RegExp(str, "gi");

  return this.each(function() {
    this.innerHTML = this.innerHTML.replace(regex, function(matched) {
      return "<span class=\"" + className + "\">" + matched + "</span>";
    });
  });
};

$("p").highlight("Z", "highlight");

この JavaScript コードは、 jQuery ライブラリを使用して、一致するテキストを検索し、スタイル設定用のカスタム クラスを含む HTML マークアップに置き換えます。この例では、段落要素内のすべての「Z」文字にクラス「ハイライト」が割り当てられています。

結果

これらのコンポーネントを組み合わせることで、目的の効果を実現できます。たとえば、「Zapata Zapatistas!!!」というテキストが考えられます。すべての「Z」文字が赤色で強調表示されて表示されます。

このアプローチは、CSS では直接サポートされていませんが、Web コンテンツ内の個々の文字をより詳細にカスタマイズできます。

以上がCSS と JavaScript を使用して Web コンテンツ内の個々の文字のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。