如何区分getComputedStyle和element.style的不同?

4 min read

在JavaScript中,可以使用getComputedStyleelement.style方法来访问和修改元素的样式属性。

getComputedStyle是一个只读属性,它返回指定元素的所有计算后样式,包括从应用的CSS样式、样式表和HTML属性中继承的样式。它返回一个对象,该对象包含所有属性及其对应的值。这些值是计算后的,即它们已经考虑了所有继承以及CSS的计算。在获取元素的计算后样式时,getComputedStyle方法返回的是CSSStyleDeclaration对象。

element.style返回的是元素的内联样式,即HTML标记中直接定义的样式。它只能访问和设置内联样式属性,而且只能访问在具体元素中直接指定的样式,不包括从其他样式表或者HTML标签中继承的样式。element.style方法返回的是一个对象,该对象只包含内联样式属性和它们的值。该方法返回的只是该元素的style属性,而不是一个对象。

因此,getComputedStyleelement.style具有不同的用途和返回内容。在修改样式时,使用element.style可以直接设置内联样式,而使用getComputedStyle可以获取元素所有计算后的样式属性,包括继承的和从样式表中获取的属性。