疑似要素(::before, ::after)のCSSをJavaScriptで制御する
1742 ワード
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
);
まずドキュメントが保持しているスタイル情報を取得する。
次にスタイルを挿入するという形。
その挿入するスタイルを擬似要素のスタイルにすることで、スタイルを編集することができる。
Author And Source
この問題について(疑似要素(::before, ::after)のCSSをJavaScriptで制御する), 我々は、より多くの情報をここで見つけました https://qiita.com/KazuyoshiGoto/items/1138f533b4860032f0e7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .