使用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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐