2015/11/18
JavaScriptでCSSを操作する方法
jQueryでCSSを操作する場合、
例えば
|
1 2 3 4 | #example { color: red; font-weight: bold; } |
上記のようなCSSを設定したければ、
|
1 2 3 4 5 6 | $(function() { $("#example").css({ "color": "red", "font-weight": "bold" }); }); |
のように記述すれば操作ができます。
ただ、案件によってはjQueryのが利用できなかったり、
対象の要素がSVGなどでブラウザによって認識されないなど、
jQueryを使わずにJavaScriptでCSSを操作する必要があります。
そこで、JavaScriptでのCSSの操作方法をまとめてみました。
追記(2019年10月)： IE11から使えるもっとわかりやすい操作方法をご紹介しました。
方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 target.style.fontWeight = "bold"; //font-weightを設定 for(var i = 0; i < target2.length; i++) { target2[i].style.color = "red"; target2[i].style.fontWeight = "bold"; } for(var i = 0; i < target3.length; i++) { target3[i].style.color = "red"; target3[i].style.fontWeight = "bold"; } |
対象となる要素はIDやタグ名などで指定し、変数に保存します。
保存した対象要素に対して、
要素.style.プロパティ = “値”;
と記述することで、CSSを変更することができます。
font-sizeのようにハイフンが入っていたり、-webkit-transitionのようにベンダーブレフィックスが含まれるプロパティは、
fontSize、webkitTransitionのように続く単語の先頭を大文字にして繋げるローワーキャメル方式で記述することで指定できます。
参考サイト
CSS属性値を変える [Java Script – (style) – CSS – Tips]
document.getElementsByTagName – Web API インターフェイス | MDN
document.getElementsByClassName – Web API インターフェイス | MDN
Author Profile
SHARE
