设置类名快捷方式答案

【问题标题】：Setting className shortcut设置类名快捷方式
【发布时间】：2013-05-20 19:02:43
【问题描述】：

在 JavaScript 中设置 className 属性是否有已知的单行代码？我的意思是你不必担心是否已经定义了一些类（-es）。

我能想到的最短的是

var objDemo = document.getElementById("demo");
objDemo.className = "newclass " + (objDemo.className || "");

如果当前的 className 未定义，这不会死，但是它给我留下了一个尾随空格。这对当前的浏览器来说会是个问题吗？

【问题讨论】：

【解决方案1】：

document.getElementById('demo').classList.add('newclass');

您可以在 Mozilla 开发网络上阅读有关此 API 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/element.classList

请注意，10 之前的 Internet Explorer 版本尚不支持，但在上面引用的页面上提供了一个 polyfill。

【讨论】：

【解决方案2】：

您可能需要先检查是否有已经具有您要添加的名称的类，或者如果找到的话就将它移到类列表的末尾。

此功能在大多数浏览器中都可以使用，无需任何波利填充：

function addClass(element, c){
    var c1= element.className.replace(RegExp('\\s*'+c+'\\b\\s*'), '');
    element.className= c1? c1+' '+c:c;
}

【讨论】：