JavaScriptでCSSを操作する方法

jQueryでCSSを操作する場合、

例えば


#example {
    color: red;
    font-weight: bold;
}

1

2

3

4

#example {

color: red;

font-weight: bold;

}

上記のようなCSSを設定したければ、


$(function() {
    $("#example").css({
        "color": "red",
        "font-weight": "bold"
    });
});

1

2

3

4

5

6

$(function() {

$("#example").css({

"color": "red",

"font-weight": "bold"

});

のように記述すれば操作ができます。

ただ、案件によってはjQueryのが利用できなかったり、

対象の要素がSVGなどでブラウザによって認識されないなど、

jQueryを使わずにJavaScriptでCSSを操作する必要があります。

そこで、JavaScriptでのCSSの操作方法をまとめてみました。

追記(2019年10月)： IE11から使えるもっとわかりやすい操作方法をご紹介しました。

方法


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 &lt; target2.length; i++) {
    target2[i].style.color = "red";
    target2[i].style.fontWeight = "bold";
}

for(var i = 0; i &lt; target3.length; i++) {
    target3[i].style.color = "red";
    target3[i].style.fontWeight = "bold";
}

1

2

3

4

5

6

7

8

9

10

11

12