使用js可以很容易地获取到元素的长度、宽度的值,那么怎么用js获取背景颜色,或者字体颜色、字体尺寸等等其它的css值呢?

1、Window.getComputedStyle方法

Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

let style = window.getComputedStyle(element, [pseudoElt]);

参数:

  1. element
    用于获取计算样式的Element。
  2. pseudoElt 可选
    指定一个要匹配的伪元素的字符串。必须对普通元素省略
    例如获取h3的after伪元素的content属性值
getComputedStyle(h3, '::after').content

返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。

注:getComputedStyle方法是window对象的方法,元素上没有这个方法。

2、获取css属性值

获取元素的背景颜色

getComputedStyle(ele).backgroundColor

这样获取所有的css属性值就都很容易了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐