JavaScript-157：通过clasName更改元素样式

结构

 <div class="first">文本</div>

样式

    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .change {
        background-color: red;
        color: #fff;
        margin: 100px;
    }

JS

        // element.style 获得修改元素样式  如果样式比较少 或者功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function ()
        {
            // this.style.backgroundColor = 'red';
            // this.style.color = '#fff';
            // this.style.margin = '100px';

            // 2 我们可以通过 修改元素的className 更改元素的样式  适合于样式较多或者功能复杂的情况
            // 3 如果想要保留原先的类型 我们可以这么做 多类名选择器
            this.className = 'first change';
        }