(1)element.style
element.style读取的只是元素的行内样式,即写在元素的 style 属性上的样式;
element.style既支持读也支持写,通过element.style即可改写元素的样式。
(2)window.getComputedStyle(element, pseudoElement 获取伪类元素,可选)
getComputedStyle读取的样式是最终样式,包括了行内样式、内部样式和外部样式。
getComputedStyle仅支持读并不支持写入。可以通过使用getComputedStyle读取样式,通过element.style修改样式。
两者相同点
getComputedStyle和element.style返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。
不同点:
element.style读取的只是元素的行内样式,即写在元素的 style 属性上的样式;而getComputedStyle读取的样式是最终样式,包括了行内样式、内部样式和外部样式。element.style既支持读也支持写,通过element.style即可改写元素的样式。而getComputedStyle仅支持读并不支持写入。可以通过使用getComputedStyle读取样式,通过element.style修改样式。