使用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;"