javascript object.className 或 object.getAttribute("className/class")？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6574946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
object.className or object.getAttribute("className/class")?
提问by Kraz
Between both those :
两者之间：
Javascript
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
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)
两个版本似乎都适用于 IE8、FF4、Chrome、Opera 和 Safari。( jsFiddle (改进) 演示)
Which one is best-usage practice and why?Did you ever run into any issue with either version?
哪一个是最佳使用实践，为什么？你有没有遇到过任何版本的问题？
采纳答案by katspaugh
getAttribute("class")is more universal, because it can be used in different types of documents. In XML documents, most importantly. Including SVG.
getAttribute("class")更通用，因为它可以用于不同类型的文档。在 XML 文档中，最重要的是。包括SVG。
element.classNameworks only in HTML. It is described in the DOM level 2 HTML specs.
element.className仅适用于 HTML。它在DOM 级别 2 HTML 规范中进行了描述。
回答by Felix Kling
object.getAttribute("className");actually does not work.
object.getAttribute("className");实际上不起作用。
The difference is that getAttributegets the value of a HTML attributeas it is written in the HTML code (with some exceptions).
不同之处在于getAttribute获取HTML 属性的值，因为它是在 HTML 代码中编写的（有一些例外）。
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.
这些值大多也是DOM 元素属性的初始值。但是由于预处理/后处理，访问它们可能会产生不同的值。
For example, if you have an <a>element, el.hrefgives you the complete (absolute) URL, while el.getAttribute('href')gives you the URL as it was written in the HTML.
例如，如果您有一个<a>元素，el.href它会为您提供完整的（绝对）URL，同时el.getAttribute('href')为您提供在 HTML 中编写的 URL。
Most of the time, you want to access the properties of the DOM element, as these reflect the current state of the element.
大多数时候，您希望访问 DOM 元素的属性，因为这些属性反映了元素的当前状态。
回答by Gerben
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.
是分拣机。它适用于所有浏览器，即使是不支持 getAttribute 的非常旧的浏览器。它也可能更快。
But please don't use a function for this. Just use this.className and this.className='newClass'. Using a function is overkill for this.
但是请不要为此使用函数。只需使用 this.className 和 this.className='newClass'。为此，使用函数是多余的。
