javascriptで:beforeや:afterなど擬似要素のプロパティや値を編集するにはどのようにしたらいいのでしょうか。jQueryを使わずに扱う方法を教えていただけますか。
こんな感じですかね？
トピ主ですありがとうございます。こちらは属性値の取得です。最初これを使ってclassNameを使ったり試したのですがエラーがでてしまって変わらないのですよね。
擬似要素を直接に編集することはできません簡単な制御なら親要素のclass改変で擬似要素を影響すればいいですがどうしてもやりたいならCSSルールを追加するしかありません
function addCSSRule(selector, css) { var sheets = document.styleSheets, sheet = sheets[sheets.length - 1]; if(sheet.insertRule) { sheet.insertRule(selector + '{' + css + '}', sheet.cssRules.length); }else if(sheet.addRule) { sheet.addRule(selector, css, -1); } } addCSSRule('hoge:after', 'background: red');
トピ主ですfirstChildなど疑似クラスはあるのに・・・と思ってたのですがinserRuleは知りませんでした。教えていただいた方法を使って変更することができました、ありがとうございます。
みんなの回答 2 件
こんな感じですかね？
JavaScriptで疑似要素afterのcontentと背景色を取得する - jsdo.it - Share JavaScri...
http://jsdo.it/Ituki/xjIN擬似要素を直接に編集することはできません
簡単な制御なら親要素のclass改変で擬似要素を影響すればいいですが
どうしてもやりたいならCSSルールを追加するしかありません
function addCSSRule(selector, css) {
var sheets = document.styleSheets,
sheet = sheets[sheets.length - 1];
if(sheet.insertRule) {
sheet.insertRule(selector + '{' + css + '}', sheet.cssRules.length);
}else if(sheet.addRule) {
sheet.addRule(selector, css, -1);
}
}
addCSSRule('hoge:after', 'background: red');
関連するトピックス