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ピクセルに変更されます。