疑似要素（::before, ::after)のCSSをJavaScriptで制御する

JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、こちらの記事を見かけたので備忘録として記録する。

「スタイルルールの追加」の概念で制御する

厳密に言うと疑似要素はJSで直接制御できない。
疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。

ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。

JSで .class::before {width:100px} みたいな記述をドキュメントに追加してしまうという考え方になる。

スタイルルールの挿入

//ドキュメントスタイルの取得
var sheets = document.styleSheets
var sheet = sheets[sheets.length - 1];

//スタイルルールの追加
sheet.insertRule(
  '.class::before { width: 100px }',
  sheet.cssRules.length
);

まずドキュメントが保持しているスタイル情報を取得する。
次にスタイルを挿入するという形。

その挿入するスタイルを擬似要素のスタイルにすることで、スタイルを編集することができる。