Question

document.getElementById('myId').style;

是访问style属性的一种方法.. 我们也可以这样做 document.getElementById('myId').getAttribute('style');

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

Answer 1

在第一个示例中，您不是访问style属性，而是访问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;"

Answer 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>

Answer 3

没有区别。

document.getElementById('myId').style;

是

的简写

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

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

Answer 4

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

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

4 个答案: