JavaScriptのDOMを使って要素のCSSを変更する方法をやさしく解説！初心者向け完全ガイド

新人と先輩の会話形式で理解しよう

新人

「JavaScriptを使ってHTMLの見た目を動的に変更する方法を教えてください！」

先輩

「DOM操作を使えば、簡単に要素の色や大きさを変更できますよ。基本的な使い方を一緒に見ていきましょう！」

1. JavaScriptで要素のCSSを変更する基本の方法

JavaScriptでは、HTMLの要素を取得した後、その要素に対してstyleオブジェクトを使ってCSSを動的に変更できます。構文は次のようになります：

DOMオブジェクト.style.プロパティ名 = "値";

次に実際の例を見ていきましょう。

2. 要素の背景色を変更する例

次の例では、querySelectorを使って見出しを取得し、その背景色を動的に変更しています。


<h1 id="heading">背景色を変更します</h1>
<p id="output1"></p>

<script>
let heading = document.querySelector("#heading");
heading.style.backgroundColor = "yellow";

let output1 = document.querySelector("#output1");
output1.innerHTML = "背景色が " + heading.style.backgroundColor + " に変更されました";
</script>

ブラウザ表示

このプログラムでは、style.backgroundColorを使って背景色を黄色に変更し、その結果が画面に表示されます。

3. ボタンをクリックしてテキストの色を変更する例

次に、ボタンを押すとテキストの色が変わる例を見てみましょう。


<p id="text">このテキストの色を変更します</p>
<button id="colorButton" onclick="changeTextColor()">色を変更する</button>
<p id="output2"></p>

<script>
function changeTextColor() {
    let text = document.querySelector("#text");
    text.style.color = "red";

    let output2 = document.querySelector("#output2");
    output2.innerHTML = "テキストの色が " + text.style.color + " に変更されました";
}
</script>

ブラウザ表示

このコードでは、ボタンをクリックすると関数changeTextColorが実行され、テキストの色が赤く変更され、その結果が画面に表示されます。

4. 要素の幅や高さを変更する例

次に、ボタンを押してボックスの幅と高さを変更する例を見てみましょう。


<div id="box" style="background-color: lightblue; width: 100px; height: 100px;">ボックス</div>
<button onclick="resizeBox()">サイズを変更する</button>
<p id="output3"></p>

<script>
function resizeBox() {
    let box = document.querySelector("#box");
    box.style.width = "200px";
    box.style.height = "200px";

    let output3 = document.querySelector("#output3");
    output3.innerHTML = "ボックスの幅が " + box.style.width + " に、 高さが " + box.style.height + " に変更されました";
}
</script>

ブラウザ表示

この例では、ボタンを押すとボックスの幅が200ピクセル、高さも200ピクセルに変更され、サイズが大きくなります。

5. 複数のスタイルを一度に変更する

複数のCSSプロパティを一度に変更するには、同じ関数の中で複数のstyleプロパティを指定します。


<p id="styledText">スタイルを変更します</p>
<button onclick="changeStyles()">スタイルを変更する</button>
<p id="output4"></p>

<script>
function changeStyles() {
    let styledText = document.querySelector("#styledText");
    styledText.style.color = "blue";
    styledText.style.backgroundColor = "lightgray";
    styledText.style.fontSize = "24px";

    let output4 = document.querySelector("#output4");
    output4.innerHTML = "テキストのスタイルが変更されました: 色=" + styledText.style.color + 
                        ", 背景色=" + styledText.style.backgroundColor + 
                        ", フォントサイズ=" + styledText.style.fontSize;
}
</script>

ブラウザ表示

この例では、ボタンを押すとテキストの色が青、背景色が灰色、フォントサイズが24ピクセルに変更されます。

6. CSSを動的に変更する際の注意点

JavaScriptでCSSを動的に変更する際には、次の点に注意しましょう：

指定するCSSプロパティはキャメルケースで記述する（例：background-colorではなくbackgroundColor）
スタイルの変更はインラインスタイルとして適用されるため、外部CSSや<style>タグの設定に影響されることがあります。

7. classListを使ってCSSを切り替える方法

styleプロパティで直接CSSを変更する方法以外にも、classListを使ってCSSクラスを切り替える方法があります。この方法は、あらかじめCSSを定義しておけるため、より実務的で管理しやすい方法です。


<style>
.active {
    color: white;
    background-color: blue;
}
</style>

<p id="text">スタイルを切り替えます</p>
<button onclick="toggleStyle()">スタイル切り替え</button>

<script>
function toggleStyle() {
    let text = document.querySelector("#text");
    text.classList.toggle("active");
}
</script>

このように、クラスを切り替えることで複雑なデザイン変更も簡単に実現できます。

8. styleプロパティで現在のCSSを取得する

styleプロパティを使うと、CSSを変更するだけでなく、現在のスタイルの値を取得することもできます。


<p id="sample">サンプルテキスト</p>
<button onclick="checkStyle()">スタイル確認</button>
<p id="result"></p>

<script>
function checkStyle() {
    let sample = document.querySelector("#sample");
    sample.style.color = "green";

    let result = document.querySelector("#result");
    result.innerHTML = "現在の文字色は " + sample.style.color + " です";
}
</script>

このように、変更したスタイルの値を取得して表示することも可能です。

9. displayプロパティで要素の表示・非表示を切り替える

CSSのdisplayプロパティを使うことで、要素の表示・非表示を切り替えることができます。よく使われるテクニックの一つです。


<p id="toggleText">このテキストを表示・非表示します</p>
<button onclick="toggleDisplay()">表示切り替え</button>

<script>
function toggleDisplay() {
    let toggleText = document.querySelector("#toggleText");

    if (toggleText.style.display === "none") {
        toggleText.style.display = "block";
    } else {
        toggleText.style.display = "none";
    }
}
</script>

このように、ユーザーの操作に応じて要素の表示状態を切り替えることができます。