Web制作において、要素の見た目を動的に変える機会はよくあります。この記事では、JavaScriptを使ってHTML要素にスタイルを追加したり、削除したりする方法をまとめます。
jQueryは使わず、素のJavaScriptで完結します。
JavaScriptでスタイルを編集する
要素に直接スタイルを追加する方法
最も直接的な方法は、element.style を使う方法です。
const box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.width = "200px";
style プロパティを通じて個別にCSSを設定できます。これはインラインスタイルとして反映され、HTML上の style="..." と同等になります。
スタイルの削除
element.style に対して 空文字 を代入することで、スタイルを削除できます。
box.style.backgroundColor = ""; // 削除され、元のCSSに戻るまたは、removeProperty() を使うことも可能です：
box.style.removeProperty("background-color");classListを使ってスタイルを制御する方法
CSSの管理が分離されている場合は、クラスの追加・削除で制御するのがスマートです。
box.classList.add("highlight"); // クラス追加
box.classList.remove("highlight"); // クラス削除
box.classList.toggle("highlight"); // 追加と削除を切り替え.classList.toggle() はオン・オフの切り替えに便利です。
条件付きでスタイルを適用する
たとえば、クリックで背景色を切り替えるには以下のように書けます：
box.addEventListener("click", () => {
box.classList.toggle("active");
});CSSファイルで .active に対応するスタイルを定義しておけば、JavaScript側はクラス操作だけで済みます。
.active {
background-color: lightgreen;
}style か classList か、どちらを使うべき？
style のメリット・デメリット：
- 即時に反映され、細かな調整に便利
- 複雑になると管理が難しい
classList のメリット・デメリット：
- スタイルの分離・再利用がしやすい
- CSSファイルとセットで使う前提
おすすめの使い分け
| 使用目的 | 方法 |
|---|---|
| 一時的な調整 | style を直接操作 |
| 状態による切り替え | classList を操作 |
| 再利用性・保守性 | classList を優先 |
まとめ
JavaScriptでスタイルを操作するには、直接 style を触る方法と、classList を使う方法の2つがあります。どちらも用途によって使い分けることで、コードがきれいになり、保守性も上がります。
Web制作や動的UIを扱う上で、スタイルの操作は避けて通れないテクニックです。基本を押さえて、自在にスタイルを操れるようになりましょう。
コメント