JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、こちらの記事を見かけたので備忘録として記録する。
「スタイルルールの追加」の概念で制御する
厳密に言うと疑似要素はJSで直接制御できない。
疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。
ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。
JSで .class::before {width:100px} みたいな記述をドキュメントに追加してしまうという考え方になる。
スタイルルールのリセット（全削除）
まずお約束としてドキュメントスタイルのリセットをイベント着火時など最初に行うと良い。
//ドキュメントスタイルの取得
var sheets = document.styleSheets, sheet = sheets[sheets.length - 1];
//スタイルルールの全削除
if(sheet.cssRules) {
for(var i = sheet.cssRules.length - 1; i > 0; i--){
sheet.deleteRule(i);
}
}
最初にリセットする理由としては、ドキュメントスタイルを追加すると削除しなければ残り続け意図しない表示になることがあり、イベントの度にリセットする形がベター。
スタイルルールの挿入
sheet.insertRule(
'.class::before { width: 100px }',
sheet.cssRules.length
);
以上のような形で、対象の疑似要素のCSSを書き加えることでスタイルを編集することができる。
↧