HTML コード:
<div class="box green">I'm green!</div>
<div class="box blue">I'm blue!</div>
<div class="box orange">I'm orange!</div>
ここにCSSコード:
.green { background-color: green; }
.blue { background-color: dodgerblue; }
.orange { background-color: orangered; }
ここでオブジェクト リテラル構文を使用する JavaScript コード : // box2 と box3 に同じ効果を適用したい
var box1 = {
color: 'Green',
number: 1,
clickMe: function () {
var green = document.querySelector('.green');
var self = this;
green.addEventListener('click', function () {
var str = 'This is box number ' + self.number + ' and it is ' + self.color;
alert(str);
});
}
}
box1.clickMe();