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

Question

document.getElementById('myId').style;

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

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

Answer 1

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

在某些属性的情况下，它们之间存在映射。因此，如果您style在 HTML 节点上设置属性，您的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') 的唯一用途是如果 attributeName 不是有效的 javascript 变量名，因此将其封装在引号中将是访问它的唯一方法。

Answer 4

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