【14】箱の色を変える

今回は箱を作りその色を変更するコードを作ります。HTMLでは「<div class=”box” id=”box”></div>」という部分で箱を作る用意をしています。ここで出てくるclassとidの違いは何でしょうか。

class（クラス）というのは同じページの中で同じ名前の物を何度も使うことができます。それに対してidというのは１度しか使うことができません。
試しに「<div class=”box” id=”box”></div>」の下にもう一つ「<div class=”box” id=”box”></div>」を書き加えてみてください。
ボタンを押した時、2つ目の箱の色はどうなるでしょうか。

箱の色を変える関数drop()は「box」というidのものを対象にしています。
2つ目に用意した箱も「box」というidをつけましたが、そのidはすでに1つ目の箱に使用しています。
そのため2つ目の箱の色は変わらないのです。

しかしCSSで設定したwidth（幅）やheight（高さ）などはきちんと適用されているようです。
CSSでは「box」というclassに対して設定を行なっています。
そのため両方の箱の大きさを決めることができています。