CSS 类型对象模型 API
CSS 类型对象模型 API(CSS Typed Object Model API)通过将 CSS 的值暴露为类型化的 JavaScript 对象而不是字符串的方式简化了 CSS 属性操作。与 HTMLElement.style
相比,这不仅简化了 CSS 操作还提高了性能。
通常,CSS 值可以在 JavaScript 中以字符串形式读取和写入,这很慢且很麻烦。CSS 类型对象模型 API 提供了与底层值交互的接口,并通过使用专门的 JS 对象来表示它们,这些对象比字符串解析和连接更容易、更可靠地进行操作和理解。这对作者来说更容易(例如,数值反映为实际的 JS 数字,并为其定义了单位感知的数学运算)。它通常也更快,因为可以直接操作值,然后廉价地转换回底层值,而无需同时构建和解析 CSS 字符串。
CSS 类型对象模型既允许对分配给 CSS 属性的值进行高性能操作,又可以实现更易于理解和编写的可维护代码。
接口
CSSStyleValue
CSS 类型对象模型 API 的 CSSStyleValue
接口是所有可通过类型对象模型访问 CSS 值的基类。此类的实例可用于任何需要字符串的地方。
CSSStyleValue.parse()
-
此方法允许通过 CSS 字符串构造
CSSNumericValue
。它将特定 CSS 属性设置为指定值,并将第一个值作为CSSStyleValue
对象返回。 CSSStyleValue.parseAll()
-
此方法将特定 CSS 属性的所有出现设置为指定值,并返回
CSSStyleValue
对象数组,每个对象包含一个提供的值。
StylePropertyMap
CSS 类型对象模型 API 的 StylePropertyMap
接口提供了 CSS 声明块的表示,它是 CSSStyleDeclaration
的替代。
StylePropertyMap.set()
-
`此方法将具有给定属性的 CSS 声明更改为给定的值。
StylePropertyMap.append()
-
此方法基于给定的属性和值,向
StylePropertyMap
添加新的 CSS 声明的方法。 StylePropertyMap.delete()
-
此方法将从
StylePropertyMap
中删除具有给定属性的 CSS。 StylePropertyMap.clear()
-
此方法将从
StylePropertyMap` 删除所有声明。
CSSUnparsedValue
CSS 类型对象模型 API 的 CSSUnparsedValue
接口表示引用自定义属性的属性值。它由字符串片段和变量引用列表组成。
CSSUnparsedValue()
构造器-
创建一个新的
CSSUnparsedValue
对象,该对象代表引用自定义属性的属性值。 CSSUnparsedValue.entries()
-
返回给定对象自有的可枚举属性
[key, value]
对的数组,其顺序与for...in
循环提供的顺序相同(不同之处在于for...in
循环也会枚举原型链中的属性)。 CSSUnparsedValue.forEach()
-
针对
CSSUnparsedValue
的每个元素执行一次提供的回调函数。 CSSUnparsedValue.keys()
-
方法返回一个新的数组迭代器对象,该对象包含数组中每个索引的键。
CSSKeywordValue
序列化
CSS 类型对象模型 API 的 CSSUnparsedValue
接口创建一个对象来表示 CSS 关键字和其他标识符。
CSSKeywordValue()
构造函数-
构造函数创建一个新的代表 CSS 关键字和其他标识符的
CSSKeywordValue()
对象。 CSSKeywordValue.value()
-
CSSKeywordValue
接口的属性,返回或设置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
——CSSNumericValue
除以提供的数字,如果为 0,则抛出错误。CSSNumericValue.min
——返回传递的最小值。CSSNumericValue.max
——返回传递的最大值。CSSNumericValue.equals
——如果所有值的类型和值完全相同,且顺序相同,则返回 true。否则返回 false。CSSNumericValue.to
——将value
转换为指定的单位。CSSNumericValue.toSum
CSSNumericValue.type
CSSNumericValue.parse
——返回从 CSS 字符串解析的数字。
CSSPositionValue
-
表示采用某个位置的属性(例如 object-position)的值。
CSSTransformValue
-
表示
transform
列表值的接口。“包含”一个或多个表示transform
函数值的CSSTransformComponent
。 CSSUnitValue
-
表示可以表示为单个单位或具名数字和百分比的数值的接口。
CSSUnparsedValue
-
表示引用自定义属性的属性值。它由字符串片段和变量引用的列表组成。
规范
Specification |
---|
CSS Typed OM Level 1 # stylevalue-objects |
CSS Typed OM Level 1 # the-stylepropertymap |
CSS Typed OM Level 1 # cssunparsedvalue |
CSS Typed OM Level 1 # keywordvalue-objects |
浏览器兼容性
api.CSSStyleValue
BCD tables only load in the browser
api.StylePropertyMap
BCD tables only load in the browser
api.CSSUnparsedValue
BCD tables only load in the browser
api.CSSKeywordValue
BCD tables only load in the browser