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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSStyleValue | ||||||||||||
parseAll() static method | ||||||||||||
parse() static method | ||||||||||||
toString |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
api.StylePropertyMap
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
api.CSSUnparsedValue
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
api.CSSKeywordValue
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSKeywordValue | ||||||||||||
CSSKeywordValue() constructor | ||||||||||||
value |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.