js擬似クラススタイルの取得/変更

文書ディレクトリ

擬似クラススタイル

を取得する.

擬似クラススタイルを修正

は、

を直接変更することはできません.

クラス間接修正

css変数による間接修正

擬似クラススタイルの取得

window.getComputedStyle(ele,'after')[prop]

擬似クラススタイルの変更

直接修正できません

クラスによる間接的な変更

異なるクラスを切り替えることで擬似クラスを切断

.div{
     
	width: 50px;
	height: 20px;
}

.sf1::after{
     
	content:'  1  '
}
.sf2::after{
     
	content:'  2  '
}

そしてjs切替クラスで実現

css変数による間接修正

<div class="my" data-color="red" data-text="    ">div>

.my::after{
     
	content: attr(data-text);  //     content
	color: attr(data-color); //     
}

次にjsによって要素属性を変更して擬似クラススタイルの変更を実現します

document.querySelector('.my').dataset.text = 'ggg'