今回は,document.getElementsByClassNameで取得した時に、私(js初心者)がつまずいたところをふまえつつ、div要素をクリックしたときに色が変わる(青から赤色)ことを例として解説していきます。

まず、divにclass名をboxにしてつくります。

jsでboxを取得し、見やすくするために、CSSで適当な大きさにします。

chromeのdeveloper toolを使い、console.dir(box);で中の構造を見ます。

▶を押し中のオブジェクトをすべて開き、style を探します。

style が見つかりました。今度はstyleの▶を押し、開きbackground-colorを探します。

background-colorが見つかりました。すなわち、boxの中にstyleがあり、その中にbackgroundColorがあります。書き方としては、box.style.backgroundColor = “red” とすれば、色を変えることができそうです。

エラーメッセージが表示されました。ここが今回の重要なポイントです。確認するために、console.dir(box.style);でstyleの中を確認します。

undefinedと表示されました。ここでこちらを参照してください!!

※ document.getElementsByClassNameはそのclass名をもった 全ての要素を 取得します。
全てということは、box2だけでは、特定できてません。
box[0]のように配列の中から取得したい要素の番号を指定すれば取得できます。

console.dir(box[0].style);とします。

エラーが起きることなく、中を確認できました。

boxのところをbox[0]に変えました。

クリックすると….
赤色に変わった!!

まとめ

・document.getElementsByClassNameはそのclass名をもった 全ての要素を 取得する

・class名を特定するために、配列を使う。


shuho

フロントエンドエンジニアを目指して、html & CSS & javascriptを学習しています。初心者にもわかりやすいように、記事を作成していきます。私自身、独学で技術を身に付けました。progateから勉強し始め、フロントエンドエンジニアになるまでの橋渡しになるよう全力で記事を書いていきます。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です