Question

例如，我们需要访问body的{{1}}

padding-right

感谢this explanations，很明显，可以通过以下方式安全地完成此操作：

let el = document.querySelector('body');
let style = window.getComputedStyle(el);

或

style.paddingRight

但是，这似乎也可以正常工作

style.getPropertyValue('padding-right')

有什么区别吗？谢谢

Answer 1

一个区别是，保证getPropertyValue返回一个字符串，而通过直接属性访问（JavaScript的括号或点表示法），您可以获得undefined。在这种情况下，getPropertyValue将返回空字符串。

let el = document.querySelector('body');
let style = window.getComputedStyle(el);

console.log(style.something === style.getPropertyValue('something')); // false

Answer 2

有区别吗？

1）是

[]-使用如下括号表示法访问属性：style['padding-right']在JavaScript（ECMAScript）的运行时规范中定义。这是一种用于访问对象属性的众所周知的机制：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

getPropertyValue()-在CSSOM规范中指定为从CSS样式对象访问CSS属性的方法。

2）不-完全不是出于实用目的

3）是和否-有关最佳实践等的意见会泛滥成灾。CSSOM规范完全有可能（尽管可能）更改，并将该属性存储在对象的其他位置。这将使方括号在您的代码中失效并中断。

Answer 3

为什么style['padding-right']也可以工作。

>function A() { this.a = 5;}
//undefined
>a = new A()
//A {a: 5}
>a['a']
//5

@trincot已经提到的差异。

getPropertyValue（）和CSSStyleDeclaration的方括号[]之间有区别吗？

3 个答案: