CSS Typed Object Model API - 将 CSS 值作为 JavaScript 对象来简化 CSS 属性的操作

CSS Typed Object Model API(CSS 类型对象模型 API)通过将 CSS 值作为类型化的 JavaScript 对象而不是字符串公开来简化 CSS 属性的操作。与 ElementCSSInlineStyle.style 相比,这不仅简化了 CSS 操作,而且提高了性能。

通常,CSS 值可以以字符串形式在 JavaScript 中读取和写入,这可能很慢而且很麻烦。CSS 类型对象模型 API 通过使用专用的 JS 对象来表示与基础值进行交互的接口,这些 JS 对象比字符串解析和连接更容易,更可靠地进行操作和理解。这对于作者来说比较容易(例如,数值会反映在实际的 JS 数字中,并为他们定义了单位感知的数学运算)。通常,它也更快,因为可以直接操纵值,然后低成本地将其转换回基础值,而无需构建和解析 CSS 字符串。

CSS 类型的 OM 既允许对分配给 CSS 属性的值进行高性能的操作,又使可维护的代码更容易理解和编写。

接口

CSSStyleValue

CSS 类型化对象模型 API 的 CSSStyleValue 接口是可通过类型化 OM API 访问的所有 CSS 值的基类。此类的实例可以在需要字符串的任何地方使用。

CSSStyleValue.parse(property, cssText)

CSSStyleValue 接口的 parse() 方法允许从 CSS 字符串构造 CSSNumericValue。它将特定的 CSS 属性设置为指定的值,并将第一个值作为 CSSStyleValue 对象返回。

CSSStyleValue.parseAll()

CSSStyleValue 接口的 parseAll() 方法将所有出现的特定 CSS 属性设置为指定的值,并返回一个 CSSStyleValue 对象数组,每个对象包含所提供的一个值。

StylePropertyMap

CSS 类型对象模型 API 的 StylePropertyMap 接口提供 CSS 声明块的表示形式,它是 CSSStyleDeclaration 的替代形式。

StylePropertyMap.set()

StylePropertyMap 接口的方法,该方法将具有给定属性的 CSS 声明更改为给定值。

StylePropertyMap.append()

使用给定的属性和值向 StylePropertyMap 添加新的 CSS 声明的方法。

StylePropertyMap.delete()

StylePropertyMap 中移除具有给定属性的 CSS 声明的方法。

StylePropertyMap.clear()

删除 StylePropertyMap 中所有声明的方法。

CSSUnparsedValue

CSS 类型对象模型 API 的 CSSUnparsedValue 接口表示引用自定义属性的属性值。它由字符串片段和变量引用的列表组成。

CSSUnparsedValue.CSSUnparsedValue() 构造函数

创建一个新的 CSSUnparsedValue 对象,该对象表示引用自定义属性的属性值。

CSSUnparsedValue.entries()

返回给定对象自己的可枚举属性 [key,value] 对的数组的方法,其顺序与 for...in 循环所提供的顺序相同(不同之处在于,for-in 循环也枚举了原型链中的属性)。

CSSUnparsedValue.forEach()

CSSUnparsedValue 的每个元素执行一次提供的函数的方法。

CSSUnparsedValue.keys()

返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键。

CSSKeywordValue Serialization

CSS 类型对象模型 API 的 CSSKeywordValue 接口创建了一个表示 CSS 关键字和其他标识符的对象。

CSSKeywordValue.CSSKeywordValue() 构造函数

创建一个新的 CSSKeywordValue.CSSKeywordValue() 对象的构造函数,该对象表示 CSS 关键字和其他标识符。

CSSKeywordValue.value()

返回或设置 CSSKeywordValue 的值。

CSSStyleValue 接口

CSSStyleValue 是一个基类,所有的CSS值都通过它来表达。子类包括。

CSSImageValue 对象

一个接口,表示使用图像的属性的值,例如 background-imagelist-style-imageborder-image-source

CSSKeywordValue

一个接口,用于创建一个对象来表示 CSS 关键字和其他标识符。当在需要字符串的地方使用时,它将返回 CSSKeyword.value 的值。

CSSMathValue

表示数值比单一数值和单位更复杂的子类树,包括:

CSSNumericValue

一个代表所有数字值可以执行的操作的接口,包括:

CSSPositionValue

表示具有位置(例如对象位置)的属性的值。

CSSTransformValue

一个表示 transform 列表值的接口。它们 “包含” 一个或多个 CSSTransformComponent,它们表示单个 transform 函数值。

CSSUnitValue

一个表示数值的接口,可以表示为单一单位,或命名的数字和百分比。

CSSUnparsedValue

表示引用自定义属性的属性值。它由一个字符串片段和变量引用的列表组成。

规范

规范 状态 备注
CSS Typed OM Level 1 工作草案 初始定义。

浏览器兼容性

参见各个接口页面。

相关链接