如何在html中使用纯javascript切换类答案

【问题标题】：How to toggle class using pure javascript in html如何在html中使用纯javascript切换类
【发布时间】：2013-12-16 13:31:46
【问题描述】：

我有一个<div>，我想在悬停时切换它的类。

这是我的代码：

function a(){
    this.classList.toggle('first');
    this.classList.toggle('sec');
}
document.querySelector('#container').addEventListener('click', a );

我知道我的 html 或 css 没有问题。只是我必须更改并放置一些东西来代替click，但我不知道是什么。

请帮忙！！

【问题讨论】：

为什么不在 css 中使用 :hover 呢？更多：w3.org/wiki/CSS/Selectors/pseudo-classes/:hover
一个原因是this :)

标签： javascript html css hover toggle

【解决方案1】：

悬停事件被称为“mouseenter”而不是“click”。

<script type="text/javascript">
    function a(){
        this.classList.toggle('first');
        this.classList.toggle('sec');
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseleave', a )
</script>

【讨论】：

当使用ID (#container) 时，老派的getElementById() 几乎是querySelector() 的10 倍
请注意，.toggle() 方法在 IE9 及更低版本上不受支持。见MDN Docs on classList
在某些边缘情况下，JS 更适合完全跨浏览器兼容性。

【解决方案2】：

虽然Tom Chung 的方法确实有效，但最好给mouseenter 和mouseleave 提供自己的处理程序：

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function(){
        this.classList.remove('first');
        this.classList.add('second');
})
container.addEventListener('mouseleave', function(){
        this.classList.add('first');
        this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

<div id="container" class="first">
    TEST
</div>

（另见this Fiddle）

【讨论】：