今回は,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名を特定するために、配列を使う。
0件のコメント