JavaScript は疑似クラス スタイルの変更を実装します

プロジェクトでは、JavaScript を使用して要素 (:before、:after) のスタイルを動的に制御する必要があることがよくありますが、JavaScript や jQuery には疑似クラス セレクターがないことは誰もが知っています。この記事では主にJavaScriptで擬似クラスのスタイルを変更する方法とコードの実装手順を紹介します。

HTML

こんにちは、これはありきたりで悲しげな段落タグです。

CSS

.red::before {
content: 'red';
color: red;
}

方法 1

JavaScript または jQuery を使用して、

要素のクラス名を切り替え、スタイルを変更します。

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

方法 2

新しいスタイルを既存の