获取元素样式

发表于 更新于 分类于 本文字数： 812 阅读时长 ≈ 3 分钟

引用MND的说明：

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

语法

1
let style = window.getComputedStyle(element, [pseudoElt]);
  • element: 用语获取计算样式的Element
  • pseudoElt: 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

例如:

1
2
3
var dom = document.getElementById("test")
var style = window.getComputedStyle(dom , ":after")
var style = window.getComputedStyle(dom , ":after").content

getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。

  1. 只读与可写
  • 正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
  1. 获取的对象范围
  • getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

getComputedStyle与defaultView

许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 。

getPropertyValue

getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：

1
window.getComputedStyle(element, null).getPropertyValue("float");

如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius")

获取变量

例子：

1
2
3
:root{
  --testMargin:75px;
}
1
2
3
4
5
6
7
8
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable = root.getPropertyValue('--testMargin').trim();

console.log(cssVariable); // '75px'

// 写入
document.documentElement.style.setProperty('--testMargin', '100px');

CSSStyleDeclaration

概要

CSSStyleDeclaration 表示一个CSS属性键值对的集合。它被用于一些API中：

  • HTMLElement.style - 用于操作单个元素的样式()；
  • (TODO: reword) 作为 declaration block 的接口，当规则为 CSSStyleRule 时，由stylesheet中的 style 属性返回 。
  • CSSStyleDeclaration也是由window.getComputedStyle()返回的只读接口.

方法

  • CSSStyleDeclaration.getPropertyPriority(): 返回可选的优先级，”Important”, 例如：
    1
    priString= styleObj.getPropertyPriority('color')
  • CSSStyleDeclaration.getPropertyValue(): 返回属性值。例如:
    1
    valString= styleObj.getPropertyValue('color')
  • CSSStyleDeclaration.item(): 返回属性名。 例如:
    1
    nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
  • CSSStyleDeclaration.removeProperty(): 返回被删除的属性。例如:
    1
    valString= styleObj.removeProperty('color')
  • CSSStyleDeclaration.setProperty(): 没有返回值。例如:
    1
    styleObj.setProperty('color', 'red', 'important')
  • CSSStyleDeclaration.getPropertyCSSValue(): 仅支持通过getComputedStyle的方式。 在Firefox (CSSPrimitiveValue中返回 ROCSSPrimitiveValue, 在其他实现 CSSValue，或为null 速记属性。

兼容性

参考