DOM获取、修改元素CSS样式的方法

最新推荐文章于 2024-08-02 08:30:00 发布

Tearl

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量1.5k

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/speano/article/details/125620135

版权

（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 修改样式。