以下のHTMLとCSSがあるとき、Javascriptで #FF0000
を #0000FF
に変更するには
すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの
一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし
効率の良い方法はありますか?
また、:after
や :before
で定義した色については差し替え不能だと思うのですが、可能ですか?
追記:
JavascriptでDOMのクラスを書き換えることで実現する方法が紹介されましたが
そうすると置換したい色の数だけCSSの定義を増やさなければならなくなるため
sassを利用したスマートな解決方法などもございましたら
是非教えていただきたいです。
HTML
<h1>hoge</h1>
<p>piyo</p>
<div>fuga</div>
<span>hena</span>
CSS
h1 {
background: #FF0000;
}
p {
color: #FF0000;
}
div {
border: solid 1px #FF0000;
}
span:after {
content: 'after:';
color: #FF0000;
}