object.className or object.getAttribute(“className/class”)?

问题

Between both those :

Javascript

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

Or

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))" />

Both version seems to work in IE8, FF4, Chrome, Opera and Safari. (jsFiddle (improved) demo)

Which one is best-usage practice and why? Did you ever run into any issue with either version?

回答1:

getAttribute("class") is more universal, because it can be used in different types of documents. In XML documents, most importantly. Including SVG.

element.className works only in HTML. It is described in the DOM level 2 HTML specs.

回答2:

object.getAttribute("className"); actually does not work.

The difference is that getAttribute gets the value of a HTML attribute as it is written in the HTML code (with some exceptions).

These values are mostly also the initial values of the properties of the DOM element. But accessing them can yield different values, due to pre-/postprocessing.

For example, if you have an <a> element, el.href gives you the complete (absolute) URL, while el.getAttribute('href') gives you the URL as it was written in the HTML.

Most of the time, you want to access the properties of the DOM element, as these reflect the current state of the element.

回答3:

Use the first one.

It's sorter. It works in every browser even the very old ones that don't support getAttribute. It probably faster too.

But please don't use a function for this. Just use this.className and this.className='newClass'. Using a function is overkill for this.

来源：https://stackoverflow.com/questions/6574946/object-classname-or-object-getattributeclassname-class

标签

javascript

classname