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(改进)演示)

哪一个是最佳使用方法,为什么？你有没遇到任何一个版本的问题？

Answer 1

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

区别在于getAttribute获取HTML属性的值,因为它是在HTML代码中编写的(有一些例外).

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

例如,如果您有一个<a>元素,则为您el.href提供完整的(绝对)URL,同时el.getAttribute('href')为您提供在HTML中编写的URL.

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

Answer 2

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

element.className仅适用于HTML.它在DOM级别2 HTML规范中进行了描述.