使用js获取元素的背景颜色
使用js可以很容易地获取到元素的长度、宽度的值,那么怎么用js获取背景颜色,或者字体颜色、字体尺寸等等其它的css值呢?1、Window.getComputedStyle方法Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性
·
使用js可以很容易地获取到元素的长度、宽度的值,那么怎么用js获取背景颜色,或者字体颜色、字体尺寸等等其它的css值呢?
1、Window.getComputedStyle方法
Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
let style = window.getComputedStyle(element, [pseudoElt]);
参数:
- element
用于获取计算样式的Element。 - pseudoElt 可选
指定一个要匹配的伪元素的字符串。必须对普通元素省略
例如获取h3的after伪元素的content属性值
getComputedStyle(h3, '::after').content
返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。
注:getComputedStyle方法是window对象的方法,元素上没有这个方法。
2、获取css属性值
获取元素的背景颜色
getComputedStyle(ele).backgroundColor
这样获取所有的css属性值就都很容易了。
更多推荐
已为社区贡献8条内容
所有评论(0)