javascriptでcssを上書きするとhoverやcheckedが効かなくなる

javascriptでcssの値を設定する

スクロールに合わせて固定されるサイドバーや要素の高さを取得して設定しなおしたり、javascriptでcssの値を設定することはよくあると思います。

このとき、cssのhoverを使ってマウスオーバー時に色等が変化する設定をしている場合や、checkedでクリックされた時になんらかの変化を設定をしている場合にその設定が無効になることがあります。今回はその対策を紹介します。

jqueryやgreensock等のライブラリを使用していてjavascriptをそのまま使用していない場合でも同様のことが起こりますので参考にしてくださいね。

hoverやcheckedが効かない例

今回は下の2つ目の例のようになってしまったときの対策です。

javascriptで背景色を再設定するとマウスカーソルをのせてた場合の設定をcssでhoverを用いて行っているのにも関わらず色が変わらなくなっちゃってます。

表示例：

カーソルのせると背景が青色になる方

カーソルのせても背景が変わらない方

ソースコード：

html

<div id="test1">背景が青色になる方</div>
<div id="test2">背景が変わらない方</div>

css

#test1,
#test2{
 background-color:#d8bfd8;
 margin-bottom: 1em;
}
#test1:hover,
#test2:hover{
 background-color: #add8e6;
}

javascript

var test2 = document.getElementById('test2');
test2.style.backgroundColor = '#d8bfd8';

hoverやcheckedの設定にimportantをつける

対策はjavascriptで再設定している要素にcssのhoverやchecked内で「! important」を付けるだけです。これだけでマウスカーソルを乗せた場合やクリックした時にちゃんとcssで指定した値をになってくれます。先ほどの例でやってみます。

「! important」を付けて解決！その例

「! important」をjavascriptで再設定する要素に付けてください。

このとき付ける位置を気をつけてください。セミコロン「;」の左側に「! important」を書きます。

表示例：

背景が変わらない方

importantを設定したやつ

ソースコード：

html

<div id="test3">背景が変わらない方</div>
<div id="test4">importantを設定した方</div>

css

#test3,
#test4{
 background-color:#d8bfd8;
 margin-bottom: 1em;
}
#test3:hover{
 background-color: #add8e6;
}
#test4:hover{
 background-color: #add8e6 ! important;
}

javascript

var test3 = document.getElementById('test3');
var test4 = document.getElementById('test4');
test3.style.backgroundColor = '#d8bfd8';
test4.style.backgroundColor = '#d8bfd8';

hoverやcheckedが効かない理由

cssには優先度があり、クラスよりもIDで指定した値が優先されたりします。

javascriptでcssの値を上書きするとその設定が最も優先されることになり、hoverやcheckedでせっかく値を設定していてもjavascriptで設定した値が優先されることになります。

するとマウスカーソルを乗せても（またはクリックしても）javascriptで設定した値だけが有効になっているので何も変化しなくなってしまいます。これを治すにはそのとっても強力なjavascriptで設定した値よりもさらに強力な値を設定する必要があります。

そのjavascriptよりも強力な値が「! important」になります。importantは問答無用でこの値を優先しろ！という命令なのでjavascriptで設定した値にも勝つことができ、結果cssで設定したhoverやcheckedの値を正常に取得することができるようになります。