的Javascript

function setCss(object, css) {
    return (object.className = css);
}
function getCss(object, css) {
    return object.className;
}

或

function getCss2(object)
{   
    if (object.getAttribute("className")) {
        return object.getAttribute("className");
    }
    return object.getAttribute("class");
}


function setCss2(object, cssclass)
{        
    if (object.getAttribute("className")) {
        return object.setAttribute("className",cssclass);
    }
    object.setAttribute("class",cssclass);
}

HTML

<a href="#" onClick="setCss(this, 'newclass')" />
<a href="#" class="something" onClick="alert(getCss(this))" />
<a href="#" onClick="setCss2(this, 'newclass')" />
<a href="#" class="something" onClick="alert(getCss2(this))" />

这两个版本似乎都适用于IE8，FF4，Chrome，Opera和Safari。（jsFiddle (improved) demo）

哪一个是最佳使用习惯以及为什么？您是否遇到过这两个版本的任何问题？

Answer 1

object.getAttribute("className");实际上无效。

区别在于getAttribute获取 HTML属性的值，因为它是在HTML代码中编写的（有一些例外）。

这些值大部分也是DOM元素的属性的初始值。但是由于预处理/后处理，访问它们会产生不同的值。

例如，如果您有一个<a>元素，el.href会为您提供完整的（绝对）网址，而el.getAttribute('href')会为您提供在HTML中编写的网址。< / p>

大多数情况下，您希望访问DOM元素的属性，因为它们反映了元素的当前状态。

Answer 2

getAttribute("class")更具普遍性，因为它可用于不同类型的文档。在XML文档中，最重要的是。包括SVG。

element.className仅适用于HTML。它在DOM level 2 HTML specs中描述。

Answer 3

使用第一个。

这是分拣机。它适用于每个浏览器，即使是那些不支持getAttribute的旧浏览器。它可能也更快。

但请不要使用此功能。只需使用this.className和this.className ='newClass'。使用函数对此来说是过度的。

Answer 4

根据 MDN Webdocs，最好使用 setAttribute/getAttribute，因为 element.className 并不总是类的字符串。如果您的 element 是 SVG 路径，element.className 将突然成为 SVGAnimatedString 的实例：

<块引用> 如果元素是 SVGElement，则

className 也可以是 SVGAnimatedString 的实例。 最好是获取/设置一个的类名 元素使用 Element.getAttribute 和 Element.setAttribute 如果你是处理 SVG 元素。但是，请考虑到 Element.getAttribute 返回 null 而不是 "" 如果元素有空类属性。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/className#notes

object.className或object.getAttribute（“className / class”）？

的Javascript

或

HTML

4 个答案: