JavaScript：HTMLページを操作しよう

今回はなにをするの？

JavaScriptを使ってページ全体やタグの見た目を操作します。できること

色を変えられる！
大きさを変えられる！
中身を変えられる！

ページ全体の操作

document.body を使います。

// 文字を青くする
document.body.style.color = "blue";

// 背景を黄色くする
document.body.style.backgroundColor = "yellow";

タグの操作

タグに id 属性で名前をつけておき、 document.getElementById() を使ってそのタグを取ってきます。

<h2 id="reds">浦和レッズ</h2>
<h2 id="marinos">横浜マリノス</h2>
<script>
let urawa = document.getElementById("reds");
urawa.style.backgroundColor = "red";
</script>

document.getElementById("reds") で <h2 id="reds">浦和レッズ</h2> をとってきて、変数 urawa に入れています。そして style の背景色(backgroundColor)を赤くしています。

スタイルシート(CSS)とJavascript

さきほどの例は、

<h2 id="reds" style="background-color:red">浦和レッズ</h2>

こうしたのと同じことになります。

スタイルシートでは background-color なのが、JavaScriptだと backgroundColor となることに注意してください。（※これは、JavaScriptだと - がマイナス記号の意味になってしまって使えないからです。）

色を変えるには？

上で見たように、 style.color 、 style.backgroundColor を変更します。

大きさを変えるには？

style.width で横幅が変わります。 style.height で高さが変わります。

let div1 = document.getElementById("div1");
div1.style.width = "100px";

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>HTMLページを操作しよう</title>
 <script>
 function oshita() {
 let id1 = document.getElementById("id1");
 id1.style.backgroundColor = "green";
 id1.style.width = "320px";
 id1.style.color = "red";
 }
 </script>
</head>
<body>
 <h2 id="id1">ボタンを押したら色が変わる</h2>
 <button onclick="oshita()">ボタン</button>
</body>
</html>