Clip to Evernote

JavaScript と CSS と !important

先日のことですが知人のサイト用にJavaScriptを書いた時に少し引っかかった部分がありました。問題となったのは『ボタンを押すと、"disable"になっている入力フォームを有効にして、その入力フォームの背景色を変更する』という部分で、特に難しく考えることもなく対象の入力フォームに以下の処理を行いました。

  
element.disabled = false;

element.style.backgroundColor = "#ffcc77";
  

実際に実行してみたところ、"disable"の解除は特に問題ありませんでしたが、背景色の方は変わるフォームと変わらないフォームがあります。はて、なんでだろう?とりあえずHTMLのソースとCSSを見てみるとCSSに怪しそうな場所が有りました。

  
BACKGROUND-COLOR: #e6e6e6 !important;
  

自分のサイトでは全く使わないので考えたこともありませんでしたが、この"!important"が思っていた以上に強かったようです。「"!important"を使わずに優先度をコントロールすべし」というのは簡単ですが、使っている以上は何かしらの事情があるのでしょう。とりあえずJavaScript側で解決する為に候補に上がったのは次の3つ。

  
element.style.setProperty("background-color","#ffcc77","important");

element.setAttribute("style","background-color:#ffcc77 !important");

element.style.cssText = "background-color:#ffcc77 !important;";
  

という訳でさっそく実験用に『ボックスの背景色をオレンジ色に変更する』ボタンを作ってみました。それぞれのボタンの内容は以下の通りです。

ボックス1
ボックス2
ボックス3
ボックス4

  
############################## HTML ############################
<div id="BoxT1" class="testBox">ボックス1<br /> <button onclick="button1();">ボタン1</button></div> <div id="BoxT2" class="testBox">ボックス2<br /> <button onclick="button2();">ボタン2</button></div> <div id="BoxT3" class="testBox">ボックス3<br /> <button onclick="button3();">ボタン3</button></div> <div id="BoxT4" class="testBox">ボックス4<br /> <button onclick="button4();">ボタン4</button></div> ############################## CSS ############################ .testBox{ width: 6em; height: 4em; line-height:1.5em; margin:5px; padding: 5px; border: solid 2px #000000; background-color: #ffffff !important; text-align: center; float:left; } ############################## JavaScript ############################ //ボタン1 function button1(){ document.getElementById("BoxT1").style.backgroundColor = "#ffcc77"; } //ボタン2 function button2(){ document.getElementById("BoxT2").style.setProperty("background-color","#ffcc77","important"); } //ボタン3 function button3(){ document.getElementById("BoxT3").setAttribute("style","background-color:#ffcc77 !important"); } //ボタン4 function button4(){ document.getElementById("BoxT4").style.cssText = "background-color:#ffcc77 !important;"; }

初めに試して駄目だったボタン1の方法も合わせて、4つのボタンを各ブラウザで確認した結果が下記の通りです。

  ボタン1 ボタン2 ボタン3 ボタン4
Internet Explorer 6 × × ×
Internet Explorer 7 × × ×
Internet Explorer 8 × ×
Internet Explorer 9 ×
Google Chrome 9 ×
Firefox 3 ×
Opera 11 ×
Safari 5 ×

IE9Google ChromeFirefoxOperaSafariではボタン2とボタン3とボタン4で色を変更することが出来ましたが、IE8ではボタン3とボタン4が有効、IE6、IE7ではボタン4のみが有効でした。今回のサイトは利用者のブラウザがIE6IE7に限定されているのでボタン4の"element.style.cssText"を使用する以外の選択肢が有りませんでしたが、クロスブラウザという点から考えてもやはり"element.style.cssText"を使用するのが妥当そうです。実は見逃しているだけで、もっと良い方法が有ったりするのかも知れませんけどね…

※IE9の結果を追記しました。

2011/02/11 14:46