2024/12/04 (更新日:2024/12/04)

【JavaScript】CSSのスタイルを変更する方法！【Element.style】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

Web制作をしていると、「ボタンの色をクリックで変えたい」や「スクロール時に背景色を動的に変更したい」といった場面に出くわすことがありますよね。今回は、JavaScriptを使ってHTML要素のCSSスタイルを変更する方法を詳しく解説します！

この記事では以下の内容を扱います。

この記事の内容！

「JavaScript」を使ってスタイルを変更する方法とは？
「Element.style」の使い方！

また、下の動画でも「JavaScript」を使って「CSSのスタイル」を「変更」する方法について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「JavaScript」を使ってスタイルを変更する方法とは？

まず、「JavaScript」を使ってスタイルを変更する方法は下記のものがあります。

「クラス属性の値」を変更する
「インラインスタイル」に新しいスタイルを記述する

そしてこの記事では「インラインスタイルに新しいスタイルを記述する」の方法を扱います。

なので「クラス属性の値」を変更するについては言及しませんが、下記の記事で「クラス属性の値」を変更する方法について解説していますので、もし気になる方はこちらをどうぞ！

【JavaScript】要素のクラス属性の値を操作する方法！【className, classList, add(), remove(), contains(), toggle()】

「element.style」を使うことで特定の要素に対して「インラインスタイルの設定」をすることができます。

このプロパティに値を代入することで、スタイルを変更することが可能です。

「element.style」でインラインスタイルの設定をする

let box = document.querySelector(".box");

box.style = "background-color: red";

<div class="box" style="background-color: red;"></div>

このように要素のインラインスタイルの設定をすることができます。

複数行書ける

let box = document.querySelector(".box");

box.style = "background-color: red; width: 100px";

<div class="box" style="background-color: red; width: 100px;"></div>

このように複数書くこともできます。

注意点：インラインスタイルが上書きされる

既に要素にインラインスタイルの設定がある場合は、単純に「element.style」を使うとそれが上書きされてしまうので、そこは注意が必要です。

対策としては、個別のCSSのプロパティに対して値をセットする、というのがあります。それは口述しますね。

個別のCSSのプロパティに対して値をセットする

<div class="box" style="height: 100px"></div>

box.style.backgroundColor = "red";

↓

<div class="box" style="background-color: red;height: 100px"></div>

このように「Elemetn.style.backgroundColor」と書くことで既存のインラインスタイルを残したまま、そこに追加する形でスタイルを当てることができます。

ポイントは下記です。

「style.」に続けてCSSのプロパティ名を書けばOK！
「background-color」のように「-」ハイフンが入るものはキャメルケースに変換

まずは、「style.」に続けてCSSのプロパティ名を書けば、そのプロパティの値を個別に設定することができます。

そして、「background-color」のように「-」ハイフンが入るものはキャメルケースに変換して書く、というルールがあるので注意してください。

background-color　→　backgroundColor
font-size　→　fontSize
border-radius　→　borderRadius

この方法で、既存のインラインスタイルを残しながら、個別にインラインスタイルを追加することができる感じ。

ただし、既存のインラインスタイルと競合する場合は「JavaScript」で書いた方のスタイルが優先されるます。

複数のプロパティを追加するには、複数行書く必要がある

const box = document.getElementById('box');
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "green";

このように、複数のインラインスタイルを追加することもできます。その場合は一行では書けないので、複数行の「JavaScript」を書く必要がありますね。

「空文字列」で「既存のインラインスタイル」を「リセット」する

box.style.backgroundColor = "";

空文字列をセットすれば、既存のインラインスタイルをリセットすることができます。

大量のスタイルの指定が必要な場合は「classList」を使うといい！

大量のスタイル変更が必要な場合、「classList」を使ってクラスを追加・削除する方が効率的です。

element.classList.add('new-class'); // クラスを追加
element.classList.remove('old-class'); // クラスを削除

「classList」の使い方については下記の記事で解説しています。

【JavaScript】要素のクラス属性の値を操作する方法！【className, classList, add(), remove(), contains(), toggle()】

参考リンク！

仕様書。
https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style

MDN。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style

まとめ！