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-image
,list-style-image
或 border-image-source
。
CSSKeywordValue
一个接口,用于创建一个对象来表示 CSS 关键字和其他标识符。当在需要字符串的地方使用时,它将返回 CSSKeyword.value
的值。
CSSMathValue
表示数值比单一数值和单位更复杂的子类树,包括:
CSSMathInvert
- 表示 CSScalc()
的值,用作calc(1 / <value>)
。CSSMathMax
- 表示 CSSmax()
函数。CSSMathMin
- 表示 CSSmin()
函数。CSSMathNegate
- 表示传递的值的负值。CSSMathProduct
- 表示通过在CSSNumericValue
上调用add()
,sub()
或toSum()
获得的结果。CSSMathSum
- 表示通过在 CSSNumericValue 上调用add()
,sub()
或toSum()
获得的结果。
CSSNumericValue
一个代表所有数字值可以执行的操作的接口,包括:
CSSNumericValue.add
- 将提供的数字添加到CSSNumericValue
中。CSSNumericValue.sub
- 将提供的数字减去CSSNumericValue
。CSSNumericValue.mul
- 将提供的数字与CSSNumericValue
相乘。CSSNumericValue.div
- 将提供的数字除以其他数字,如果为 0,则抛出错误。CSSNumericValue.min
- 返回传递的最小值CSSNumericValue.max
- 返回传递的最大值CSSNumericValue.equals
- 如果所有值都是完全相同的类型和值,并且顺序相同,则返回true
。否则为false
。CSSNumericValue.to
- 以指定单位将value
转换为另一个值。CSSNumericValue.toSum
CSSNumericValue.type
CSSNumericValue.parse
- 返回从 CSS 字符串解析的数字
CSSPositionValue
表示具有位置(例如对象位置)的属性的值。
CSSTransformValue
一个表示 transform
列表值的接口。它们 “包含” 一个或多个 CSSTransformComponent
,它们表示单个 transform
函数值。
CSSUnitValue
一个表示数值的接口,可以表示为单一单位,或命名的数字和百分比。
CSSUnparsedValue
表示引用自定义属性的属性值。它由一个字符串片段和变量引用的列表组成。
规范
规范 | 状态 | 备注 |
---|---|---|
CSS Typed OM Level 1 | 工作草案 | 初始定义。 |
浏览器兼容性
参见各个接口页面。