获取元素的 CSS 样式

紫微前端

于 2022-07-26 09:20:36 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125987721

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

这篇博客介绍了如何利用JavaScript获取HTML元素的CSS样式，包括标准样式和带有供应商前缀的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以通过该getComputedStyle方法获取所有的 CSS 样式：

const styles = window.getComputedStyle(ele, null);

从那里，很容易获得特定风格的价值：

const bgColor = styles.backgroundColor;

对于具有以连字符 (-) 开头的供应商前缀的样式，我们可以通过传递样式来获取样式值：

const textSizeAdjust = styles['-webkit-text-size-adjust'];

该getPropertyValue方法产生相同的结果：

const bgColor = styles.getPropertyValue('background-color');

// Or turn the parameter to camelCase format:
const bgColor = styles.getPropertyValue('backgroundColor');