0

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();
4

3 に答える 3