如何从所有元素中删除特定的类？

Question

如何从页面元素中删除给定的类？

例:

<div class="fan light"> ... </div>
<div class="light"> ... </div>
<h3 class="seahorse light"> SomeHeading </h3>

我想light从页面的所有元素中删除该类!

我如何使用jquery或javascript做到这一点？

Answer 1

只要找到所有的元素做有类,并将其删除:

$(".light").removeClass("light");

使用纯JavaScript:

var lights = document.getElementsByClassName("light");
while (lights.length)
    lights[0].className = lights[0].className.replace(/\blight\b/g, "");

(这取决于浏览器支持.getElementsByClassName().)请注意,循环看起来有点奇怪,总是在元素列表的元素0上操作.这是因为从类似API返回的列表.getElementsByClassName()是实时的 - 它们会更改以反映DOM中的更改.从元素中删除类时,它不再位于具有该类名的元素列表中.因此,通过从列表中的第一个元素中删除该类,该元素就会消失.最终列表将为空.(我一直认为这是一种奇怪的行为,公然违反了最不惊讶的原则,但你去了.)

最后,在评论中指出,较新的浏览器(IE10 +)支持一个名为的DOM元素属性.classList.它是一个类名列表,而且它支持一些方便的方法.特别是:

var lights = document.getElementsByClassName("light");
while (lights.length)
    lights[0].classList.remove("light");