object.className or object.getAttribute("className/class")?

Question

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?

Answer 1

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.