8

两者之间：

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（改进）演示）

哪一个是最佳使用实践，为什么？你有没有遇到过任何一个版本的问题？

4

4 回答 4

10

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

不同之处在于getAttribute获取HTML 属性的值，因为它是用 HTML 代码编写的（有一些例外）。

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

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

大多数时候，您希望访问 DOM 元素的属性，因为这些属性反映了元素的当前状态。

于 2011-07-04T18:34:48.393 回答
6

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

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

于 2011-07-04T18:38:38.880 回答
1

使用第一个。

是分拣机。它适用于所有浏览器，即使是不支持 getAttribute 的非常旧的浏览器。它可能也更快。

但请不要为此使用函数。只需使用 this.className 和 this.className='newClass'。为此，使用函数是矫枉过正的。

于 2011-07-04T18:37:07.697 回答
0

根据 MDN Webdocs，最好使用 setAttribute/getAttribute，因为element.className它并不总是类的字符串。如果您element的路径是 SVG 路径，element.className则会突然成为 SVGAnimatedString的一个实例：

如果元素是 SVGElement，className 也可以是 SVGAnimatedString 的实例。如果您正在处理 SVG 元素，最好使用 Element.getAttribute 和 Element.setAttribute获取/设置元素的类名。 但是，请注意，如果元素具有空类属性，则 Element.getAttribute 返回 null 而不是 ""。

来源：https ://developer.mozilla.org/en-US/docs/Web/API/Element/className#notes

于 2021-07-23T21:55:05.553 回答