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

Question

document.getElementById('myId').style;

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

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

Answer 1

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

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

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

如果是风格，强烈推荐第一种。

用一个例子(在现代浏览器中)来说明:

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