Javascriptで特定のカラーを全て他の色に置き換えるには?

投稿者: Anonymous

以下の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;
}

解決

設定した色の値自体を変えるのは面倒なので、ごくごく普通に複数CSSセレクタに対する一括指定をする方法が良いと思います。

方法1: CSS クラス指定での切り替え

やり方としては以下のようにします。

  1. 上書きルールセットとして CSS クラスを作成しておき、
  2. 対象になる要素全体を別の要素で囲んで、
  3. その要素に対する CSS クラス指定だけを変更

_x000D_

_x000D_

h1 { background: #FF0000; }_x000D_
p { color: #FF0000; }_x000D_
div { border: solid 1px #FF0000; }_x000D_
span:after { content: 'after:'; color: #FF0000; }_x000D_
_x000D_
#root.red h1, #root.red p, #root.red div, #root.red span:after { color: #FF0000; }_x000D_
#root.green h1, #root.green p, #root.green div, #root.green span:after { color: #00FF00; }_x000D_
#root.blue h1, #root.blue p, #root.blue div, #root.blue span:after { color: #0000FF; }

_x000D_

<div id="root">_x000D_
  <h1>hoge</h1>_x000D_
  <p>piyo</p>_x000D_
  <div>fuga</div>_x000D_
  <span>hena</span>_x000D_
</div>_x000D_
_x000D_
<button onClick="javascript:document.getElementById('root').className='red';">red</button>_x000D_
<button onClick="javascript:document.getElementById('root').className='green';">green</button>_x000D_
<button onClick="javascript:document.getElementById('root').className='blue';">blue</button>

_x000D_

_x000D_

_x000D_

もちろん、CSS を直接書き換える手段としては、 document.StyleSheets プロパティが存在していますが、ブラウザによって実装が違うので、モダンなブラウザ限定+実証されたライブラリを通して使うという条件でないと使うのは怖い感じがします)’0’(


追記:

そうですか・・・では、 document.StyleSheets を使う例は以下になります。

方法2: CSS ルールを書き換える

getCSSRule() 関数は、紹介した記事の物を使っています。

_x000D_

_x000D_

function getCSSRule(ruleName, deleteFlag) { _x000D_
    ruleName = ruleName.toLowerCase(); _x000D_
    if (document.styleSheets) { _x000D_
      for (var i = 0; i < document.styleSheets.length; i++) { _x000D_
        var styleSheet = document.styleSheets[i]; _x000D_
        var ii = 0; _x000D_
        var cssRule = false; _x000D_
        do { _x000D_
          if (styleSheet.cssRules) { _x000D_
            cssRule = styleSheet.cssRules[ii]; _x000D_
          } else { _x000D_
            cssRule = styleSheet.rules[ii]; _x000D_
          } _x000D_
          if (cssRule) { _x000D_
            if (cssRule.selectorText.toLowerCase() == ruleName) { _x000D_
              if (deleteFlag == 'delete') { _x000D_
                if (styleSheet.cssRules) { _x000D_
                  styleSheet.deleteRule(ii); _x000D_
                } else { _x000D_
                  styleSheet.removeRule(ii); _x000D_
                } _x000D_
                return true; _x000D_
              } else { _x000D_
                return cssRule; _x000D_
              } _x000D_
            } _x000D_
          } _x000D_
          ii++; _x000D_
        } while (cssRule) _x000D_
      } _x000D_
    } _x000D_
    return false; _x000D_
  } _x000D_
_x000D_
function killCSSRule(ruleName) { _x000D_
    return getCSSRule(ruleName, 'delete'); _x000D_
  } _x000D_
_x000D_
function addCSSRule(ruleName) { _x000D_
  if (document.styleSheets) { _x000D_
    if (!getCSSRule(ruleName)) { _x000D_
      if (document.styleSheets[0].addRule) { _x000D_
        document.styleSheets[0].addRule(ruleName, null, 0); _x000D_
      } else { _x000D_
        document.styleSheets[0].insertRule(ruleName + ' { }', 0); _x000D_
      } _x000D_
    } _x000D_
  } _x000D_
  return getCSSRule(ruleName); _x000D_
}

_x000D_

h1 { background: #FF0000; }_x000D_
div { border: solid 1px #FF0000; }_x000D_
span:after { content: 'after:'; }_x000D_
_x000D_
.coloring { color: #FF0000; }

_x000D_

<h1 class="coloring">hoge</h1>_x000D_
<p class="coloring">piyo</p>_x000D_
<div class="coloring">fuga</div>_x000D_
<span class="coloring">hena</span>_x000D_
_x000D_
<button onClick="javascript:getCSSRule('.coloring').style.color = '#FF0000';">red</button>_x000D_
<button onClick="javascript:getCSSRule('.coloring').style.color = 'green';">green</button>_x000D_
<button onClick="javascript:getCSSRule('.coloring').style.color = 'blue';">blue</button>

_x000D_

_x000D_

_x000D_

自分としてはまだ怖い使い方なので、使用されるブラウザを限定しない限りは、この方法を推奨しません。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *