JavaScript 速習チュートリアル

HTML DOM - CSSの変更

Volardev 編集部 April 18, 2026

1. HTMLスタイルの変更

HTML DOMを使用することで、JavaScriptからHTML要素のスタイル（style）を変更することが可能になります。 HTML要素のスタイルを変更するには、以下の構文（シンタックス）を使用します。

document.getElementById(id).style.property = new style

1.1 コード例

以下の例では、 <p> 要素のスタイルを変更しています。

<html>
<body>

<p id="p2">こんにちは、世界！</p>

<script>
// IDが"p2"の要素の文字色を青に変更
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

2. イベントの利用

HTML DOMでは、イベント（Event）が発生した際に特定のコードを実行させることができます。
ブラウザは、HTML要素に対して「何かが起きた」ときにイベントを生成します。

要素がクリックされたとき
ページがロード（読み込み）されたとき
インプットフィールドが変更されたとき

※イベントの詳細については、本チュートリアルの次のチャプターで詳しく解説します。

2.1 コード例

ユーザーがボタンをクリックしたときに、 id="id1" を持つHTML要素のスタイルを変更する例です。

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">マイ・ヘッディング 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
ここをクリック！</button>

</body>
</html>

3. その他の例

3.1 要素の表示・非表示

要素をインビジブル（不可視）にする方法です。特定の条件に基づいて要素を表示させるかどうかの制御が可能です。

<!DOCTYPE html>
<html>
<body>

<p id="p1">表示状態を切り替えられるテキストです。</p>

<input type="button" value="テキストを非表示" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="テキストを表示" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>