使用 javascript 访问属性值的不同方法答案

【问题标题】：Different ways of accessing attribute values using javascript使用 javascript 访问属性值的不同方法
【发布时间】：2015-02-02 00:37:31
【问题描述】：

document.getElementById('myId').style;

是访问样式属性的一种方式。我们也可以使用 document.getElementById('myId').getAttribute('style');

这两种获取属性值的方式有什么区别。哪一种更可取？

【问题讨论】：

我认为您也可以使用document.getElementById('myId')['style']。 afaik，使用getAttribute() 的原因与@gwynhowell 解释的类似。
这只是访问对象属性的另一种方式..对吗？
@JinuJD 被称为square bracket notation，与dot notation 相反。见：developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects

标签： javascript html css

【解决方案1】：

在第一个示例中，您访问的不是style 属性，而是style 属性。如果style 属性是一个对象，则该属性的值可以是任何值。在第二个示例中，您正在访问标签的样式属性。属性值只能是字符串。

在某些属性的情况下，它们之间存在映射。因此，如果您在 HTML 节点上设置属性 style，您的 style 属性将更新并应用您的样式。但是，这并不总是正确的：某些 IE 版本（至少在 IE7 之前）中的一个众所周知的错误是这种映射被破坏了，因此设置的属性不会反映到属性中。

所以，如果你想在一个 HTML 节点上设置一个属性，你必须使用第二个。但是，如果您想访问表示 HTML 节点的对象的属性，则必须使用第一个。

如果是style，强烈推荐第一个。

用一个例子来说明清楚（在现代浏览器中）：

document.body.style.border = "1px solid red";
console.log(document.body.style); // [object CSSStyleDeclaration]
console.log(document.body.getAttribute("style")); // "border: 1px solid red;"

【讨论】：

感谢您的回答...这就是为什么我将 alert(document.getElementById('myId').style) 作为 CSSstyle 声明和 alert(document.getElementById('myId').style) 作为字符串jsfiddle.net/rQrRj ?
嗯，不确定我明白了，你在评论中发布了相同的代码；在您发布的 jsfiddle 中没有样式。但是行为是正确的：您设置了一个自定义属性，但是由于没有映射到某个属性，您将该属性设置为未定义。请注意，在旧版本的 IE 中（至少）如果你设置了一个“扩展属性”，你最终也会将它作为属性，如果它是字符串。 IE 中的所有主题都非常混乱。
是否有任何其他属性返回 document.body 上的对象。
很多，但这取决于您对propertyName 的意思。如果您的意思是某些属性也是属性，或者您的意思是一般性。您可以在这里查看：w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201。一个例子可能是事件处理程序，其中document.body.onclick 是一个匿名函数，document.body.getAttribute("onclick") 是一个字符串。在某些版本的 IE 中，您具有与 style 相同的损坏行为：从 JS 设置属性不要在对象上设置正确的事件。

【解决方案2】：

getAttribute 将返回非标准属性的值以及标准属性的值。

对象属性符号不会，因为非标准属性不会转换为属性。

<a id="test" foo="bar"> ... </a>

<script>

    console.log(document.getElementById('test').foo); // undefined

    console.log(document.getElementById('test').getAttribute('foo')); // "bar"

</script>

【讨论】：

【解决方案3】：

没有区别。

document.getElementById('myId').style;

是

的简写

document.getElementById('myId').getAttribute('style');

getAttribute('attributeName') 的唯一用途是如果 attributeName 不是有效的 javascript 变量名，因此将其封装在引号中将是访问它的唯一方法。

【讨论】：

这是不准确的。 getAttribute 也将返回非标准属性的值。这不适用于对象属性表示法，因为这些非标准属性不会转换为属性。 jsfiddle.net/rQrRj
这是不正确的。事实上，如果它们相同，您应该在获取和设置样式中获得相同的结果。但是，由于您获得的价值不同，因此它们也不相同。请参阅：document.getElementById("myId").getAttribute("style").border = "1px solid red" 与 document.getElementById("myId").style.border = "1px solid red"; 的比较实际上第一个方法返回的是字符串而不是对象 (CSSStyleDeclaration)。

【解决方案4】：

是的，没有区别，详细示例可以在以下链接中找到： https://developer.mozilla.org/en/DOM/element.style#Example

【讨论】：