logo标签列表

如何在没有使用jQuery的情况下向<html>元素添加类？

javascriptclass
44

如何在不使用jQuery（或类似的库）的情况下，向根<html>元素添加类名“foo”？

6
这么多重复的东西... - Zirak
@CoryMawhorter 操作类，获取HTML元素 - Zirak
3个回答
64

您可以使用 classList 来访问元素的类列表。

document.documentElement.classList.add('my-awesome-class');

document.documentElement.classList.remove('my-awesome-class');

document.documentElement.classList.contains('my-awesome-class');
2
请谨慎使用，classList 仅部分支持 Internet Explorer 浏览器： http://caniuse.com/#search=classList - Elad Levy
61

只需获取该元素并将其附加到类列表中即可。

document.documentElement.className += " foo";
4
谢谢！用jQuery可以做很多事情，即使不了解基本的JavaScript也可以。如果这个问题已经被问了无数次，对不起，我只找到了基于jQuery的解决方案。 - user940633
当我使用-=运算符以同样的方式删除一个类时，类名中会出现NaN，而不是空（JS在使用+和-运算符时自动转换为数字？）。当然，如果您只有一个类，可以使用= "";来删除它，但是Olivér Kovács的答案对我的情况最好。 - Anderson
1
@Anderson 在JS中，当您使用+=时，它会将两个字符串document.documentElement.className和" foo"连接起来，但是JavaScript中没有用于字符串的-运算符。因此，解释器会隐式地将字符串document.documentElement.className和" foo"转换为数字，这导致产生了NaN。NaN - NaN的结果是NaN。您可以在Chrome控制台中执行"hello" - "foo"以查看相同的结果。 - Jeremy Wiebe
1
为了确保代码始终保持清晰，可以进行一个简单的更改，即在“foo”之前和之后使用空格。这样，即使其他人以不良方式添加代码，您的类仍然是良好的。 - Brad Parks
5
AddClass(document.documentElement, 'my-awesome-class', true); //add
AddClass(document.documentElement, 'my-awesome-class', false); //remove

function AddClass(o,c,bAdd){
    var list = o.className.split(" ");
    if (list.indexOf(c)!==-1){
        if (!bAdd) delete list[list.indexOf(c)];
    }else{
        if (bAdd) list[list.length] = c;
    }
    o.className = list.join(" ");
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接