JavaScript HTML DOM - CSS を変更する

HTML DOMは、JavaScriptがHTML要素のスタイルを変更するために使用できます。

HTMLスタイルの変更

HTML要素のスタイルを変更するには、この文法を使用してください：

document.getElementById(id).style.property = 新しいスタイル

以下の例では、 <p> 要素のスタイル：

例

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>上記の段落はスクリプトで変更されました。</p>
</body>
</html>

自分で試してみる

イベントを使用する

HTML DOM は、イベントが発生したときにコードを実行することができます。

HTML 要素で「何かが」発生したとき、ブラウザはイベントを生成します：

  • 要素をクリックしたとき
  • ページが読み込まれたとき
  • 入力フィールドが変更されたとき

次の章で、イベントに関するさらに多くの知識を学びます。

この例では、ユーザーがボタンをクリックしたときに、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>

自分で試してみる

さらに多くの例

可視性
要素を非表示にする方法について。要素を表示にしたいですか？

HTML DOM Style オブジェクト リファレンス マニュアル

すべての HTML DOM スタイル属性については、以下のページを訪れてください。 HTML DOM Style オブジェクト リファレンス マニュアル。