javascript - object.className 或 object.getAttribute ("className/class")？

Question

两者之间:

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 代码编写的(有一些异常(exception))。

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

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

大多数时候，您想要访问 DOM 元素的属性，因为这些属性反射(reflect)了元素的当前状态。