雲を取得する
Coddyの「流れる雲 - HTML/CSS/JSプロジェクト」コースのレッスン 7/18。
JSを使ってDOM要素を操作する方法について、簡単におさらいしましょう。
クラス名で要素を取得するには、document.getElementsByClassNameを使用します：
const elements = document.getElementsByClassName("someName");上記は、ドキュメント内のクラス名が"someName"であるすべての要素の配列を取得します。
要素のスタイルを変更するには、styleプロパティを使用します：
const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";上記は、クラス名が"someName"である最初の要素の背景色を"red"に設定します。
注意：
elementsが空の配列である場合、プログラムは失敗します。
チャレンジ
簡単JSファイル内：
- クラス名が
"cloud"の要素を取得します - 要素の中の最初の要素（唯一の雲）を取得し、以下を設定します：
topスタイルを"0px"より大きい値に設定しますleftスタイルを"0px"より大きい値に設定します
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>