jQuery が CSS 疑似要素を変更する方法

CSS 疑似要素 (疑似要素) は DOM 要素ではないため、直接選択することはできません。

次の HTML コードがあるとします:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

および CSS コード:

.techbrood:before {
width: 0;
}

次に、要素のクリック イベントで techbrood:before の width 属性を 100% に動的に設定します。

方法は 2 つあり、1 つは新しいスタイルを追加する方法です:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(このメソッドはクラス techbrood を持つすべての要素に影響することに注意してください)

もう 1 つの方法は、要素に新しいクラスを追加し、その新しいクラスの属性を設定して、疑似要素の属性を変更する効果を実現することです。

.techbrood.change:before{
width: 100%;
}

jQuery コード:

$('#td_pseudo').addClass("change");