Question

我在JS中获取DOM元素属性时遇到问题。这是代码：

return elem.getAttribute(attr) || elem[attr] || "";

elem.getAttribute(attr)用于获取name或id等属性，elem[attr]用于获取tagName等属性。它工作正常，直到style出来。

在我的情况下，我希望在未设置""属性时style。但是使用上面的代码，当elem[attr]返回null时，它会尝试elem.getAttribute(attr)。因此，如果未设置style，我会获得所有浏览器支持的样式，而不是"" 。

如何处理这个问题？有比枚举属性更好的方法吗？

修改

我想编写一个通用函数来获取元素的属性（例如name，style）或属性（例如tagName）。

Answer 1

主要区别在于elem.getAttribute(attr)尝试在标记元素中获取属性，但elem[attr]尝试从对象获取属性，重要的是要知道elem从元素对象，声明此属性，并在某些情况下定义，其中一个属性为样式。

在style属性的特定情况下，默认情况下已使用CSSStyleDeclaration定义，这是获得样式属性的原因。

如果您只想检查属性是否在标记中，我建议您仅使用此代码：

return elem.getAttribute(attr) || "";

Answer 2

这是我在我的应用程序中使用的代码，所以我只是复制＆amp; amp;粘贴它：

Object.defineProperty( Element.prototype, "hashAttr", { get: function(){ 
    /* Bekim Bacaj 2008 */
    var hash=[], i = 0, x = this.attributes; 
        while( x[i] ){hash[x[i].name] = x[i++].value};
    return hash;
}})
;

据我所知，这是最快的。

这是从其标记上没有内联或JavaScript指定样式的元素返回的示例。：

>> media.hashAttr 
 {
    width : "100%",
    height : "100%",
    id : "media",
    src : "http://*****.***/stream/*****.mp4",
    autoplay : "false",
    poster : "http://******.***/thumb/*****.jpg",
    type : "video/mp4"
}

请注意，因此，属性列表中不存在脱机样式属性。

Answer 3

我有一个答案。它专门处理tagName。这不是很好。但它可以完成工作。

var value = elem.getAttribute(attr);
if (!value) {
    if (attr == "tagName") {
        value = elem["tagName"] || "";
    } else {
        value = "";
    }
}
return value;

JS get元素的属性与elem.getAttribute（attr）和elem [attr]之间的区别

3 个答案: