jQuery を使用して CSS 疑似要素 (::before、::after) のスタイル プロパティにアクセスして変更するにはどうすればよいですか?

jQuery での疑似要素のスタイル プロパティへのアクセス

この記事では、次のような疑似要素のスタイル プロパティへのアクセスの問題について詳しく説明します。 ::before と ::after、jQuery を使用します。

CSS、疑似要素は要素の外観を変更するために使用されますが、jQuery セレクターで直接ターゲットにすることはできません。本質的に、疑似要素はターゲット要素の前後にコンテンツを挿入し、個別にスタイルを設定することはできません。

たとえば、次の CSS ルールがあるとします。

.example::before {
  content: "Added Text";
}

次のような jQuery を使用した疑似要素:

$(".example::before").css("color", "red");

は機能しません。代わりに、親要素をターゲットにし、:has() セレクターを使用して、特定の疑似要素を持つ要素を選択する必要があります:

$(".example:has(::before)").css("color", "red");

または、jQuery.cssRules() プラグインを使用して、 CSS ルールに直接アクセスして変更します:

var rules = jQuery.cssRules();
for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText === ".example::before") {
    rules[i].style.color = "red";
  }
}

ただし、このアプローチはブラウザのサポートによって制限されることに注意することが重要です。互換性の問題。

要約すると、jQuery セレクターを使用して擬似要素を直接選択することはできませんが、そのスタイル プロパティにアクセスして変更するために使用できる代替メソッドがあります。

以上がjQuery を使用して CSS 疑似要素 (::before、::after) のスタイル プロパティにアクセスして変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。