object.className 还是 object.getAttribute("className/class")？答案

【问题标题】：object.className or object.getAttribute("className/class")?object.className 还是 object.getAttribute("className/class")？
【发布时间】：2011-09-28 07:57:12
【问题描述】：

两者之间：

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)

哪一个是最佳使用实践，为什么？您有没有遇到过任何一个版本的问题？

【问题讨论】：

标签： javascript classname

【解决方案1】：

object.getAttribute("className");实际上不起作用。

不同之处在于getAttribute 获取HTML 属性 的值，因为它是用HTML 代码编写的（有一些例外）。

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

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

大多数时候，您希望访问 DOM 元素的属性，因为这些属性反映了元素的当前状态。

【讨论】：

它将在 IE 8 Quirks Mode 及以下模式下工作，因为它们的实现只为 get/set/removeAttribute 使用 DOM 属性名称。来源：msdn.microsoft.com/en-us/library/ms536739%28v=VS.85%29.aspx
object.getAttribute("className"); 是 IE 7 所必需的，实际上更少。你可以很容易地猜到为什么......：/
@Kraz：我明白了......然后让我们说在 proper 实现中，这不起作用;)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用第一个。

这是分拣机。它适用于所有浏览器，即使是不支持 getAttribute 的非常旧的浏览器。它可能也更快。

但请不要为此使用函数。只需使用 this.className 和 this.className='newClass'。为此使用函数是多余的。

【讨论】：

【解决方案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

【讨论】：