jsで擬似要素スタイルを変更する方法

通常は擬似要素のスタイルを直接CSSで設定するのが便利です

.test:after{
	content:'';
	display:block;
	width:100%;
	height:100%;
	background:red;
}

しかし、jsで動的に偽要素のスタイルを変えたい場合がありますが、jsが偽要素を取得できないのは頭が痛いですが、考えを変えてこの問題を解決することができます.

方法1:要素に直接</code>ラベル</h 4><pre><code><span class=「token function」>$</span><span class=「token punctuation」>(</span><span class=「token string」>'.test'</span><span class=「token punctuation」>)</span><span><span><span><span class=「token punctuation」></spanspan><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<style>.test:after{display:none}') しかし、この方法は面倒で、あまりお勧めしませんので、できるだけjsで偽要素のスタイルを変えないで、融通して、偽要素を他のラベルに変えて、jsで動的に制御します。

方法2:クラス名を直接変更する

.change:after{
	content:'';
	display:none;
}

$('.test').addClass('change').removeClass('test')

この方法は、testクラス名を削除するが、この要素にはtestの他のいくつかのスタイルが必要である場合に注意しなければならない.changeクラス名にこれらのスタイル

を追加する.

またはtestのクラス名を削除せずに、testのいくつかのスタイルを優先度で直接上書きします.

もう一つ注意しなければならないことがあります:偽要素は必ずcontent:'';を加えなければなりません.そうしないと、書かれた他のスタイルは機能しません.

私の は空いています.
https://www.wangyanan.online