<p><button onclick="myFunction()">点我</button></p>

<p><strong>注意:</strong>IE9 及更早版本浏览器不支持 classList 属性, 以下实例中，我们判断了浏览器是否支持 classList.toggle() 方法。如果不支持则使用 className 属性，也可以得出相同的结果。</p>

<div id="myDIV">

这是一个 DIV 元素。

</div>

function myFunction() {

    var element = document.getElementById("myDIV");

​

    if (element.classList) { 

        element.classList.toggle("mystyle");

    } else {

        var classes = element.className.split(" ");

        var i = classes.indexOf("mystyle");

​

        if (i >= 0) 

            classes.splice(i, 1);

        else 

            classes.push("mystyle");

            element.className = classes.join(" "); 

    }

}

.mystyle {

    width: 100%;

    padding: 25px;

    background-color: coral;

    color: white;

    font-size: 25px;

    box-sizing: border-box;

}