Javascriptで::afterや::beforeのスタイルを操作したいです。

Question

Javascriptを使用してCSSの疑似要素にアクセスして値を変更したいです。
できればjQueryを使用したくないので、Javascriptのみで操作できる方法があれば教えていただきたいです。
よろしくお願いします。

Answer 1

JavaScriptでは、擬似要素を、ノードとしては、つかめませんが、
style要素にアクセスするAPIは用意されています。

// style要素を取得（document.createElementで新たに作ることも可能）
var styleEl = document.querySelector('style');
var styleSheet = styleEl.sheet;
var cssRuleList = styleSheet.cssRules; 

// CSSルールを追加
var ruleText = 'div#x1::after {top: 1px;}';
styleSheet.insertRule(ruleText, cssRuleList.length);

もしくは、アニメーションとかをさせたいのであれば、
大きさ0の要素を作り、その要素の::afterにスタイルを効かせ、
0要素を動かす、っていうのもありかと。

Comments

[usawb]

ありがとうございます。やってみたいと思います。

Answer 2

<script>
window.onload=function(){
var n=document.getElementById("x2");
console.log(n.previousSibling.id);
console.log(n.nextSibling.id);
}
</script>
<div id="x1">x1</div><div id="x2">x2</div><div id="x3">x3</div>

siblingはノード単位なので改行などテキストノードがあってもヒットしますので
タグ単位でやりたい場合は工夫が必要です

ちなみに疑似要素はあくまで擬似なのでつかむことはできません。
もしやるならノードとしてつかむということです

Comments

[usawb]

ありがとうございます。為になりました。