CSS Typed Object Model API
CSS 类型化对象模型 API 通过将 CSS 值暴露为类型化的 JavaScript 对象而非字符串,简化了 CSS 属性的操作。这不仅简化了 CSS 操作,而且与 HTMLElement.style 相比,对性能的负面影响也更小。
通常,CSS 值可以在 JavaScript 中作为字符串进行读取和写入,这可能既慢又笨拙。CSS 类型化对象模型 API 通过使用专门的 JS 对象来表示底层值,提供了与底层值交互的接口,这些对象比字符串解析和连接更容易、更可靠地进行操作和理解。这对于开发者来说更简单(例如,数值会以实际的 JS 数字形式反映,并且为其定义了具有单位意识的数学运算)。它通常也更快,因为值可以直接操作,然后可以廉价地转换回底层值,而无需同时构建和解析 CSS 字符串。
CSS 类型化 OM 既允许对分配给 CSS 属性的值进行高效操作,又支持可维护的代码,这些代码既易于理解又易于编写。
接口
CSSStyleValue
CSS 类型化对象模型 API 的 CSSStyleValue 接口是所有通过类型化 OM API 访问的 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 的 CSSKeywordValue 接口创建一个对象来表示 CSS 关键字和其他标识符。
CSSKeywordValue()构造函数-
构造函数创建一个新的
CSSKeywordValue()对象,该对象表示 CSS 关键字和其他标识符。 CSSKeywordValue.value()-
CSSKeywordValue接口的属性,用于返回或设置CSSKeywordValue的值。
CSSStyleValue 接口
CSSStyleValue 是所有 CSS 值表示的基础类。子类包括
CSSImageValue-
一个表示需要图像的属性值的接口,例如
background-image、list-style-image或border-image-source。 CSSKeywordValue-
一个创建对象来表示 CSS 关键字和其他标识符的接口。当在需要字符串的地方使用时,它将返回
CSSKeyword.value的值。 CSSMathValue-
一个子类树,表示比单个值和单位更复杂数值,包括
CSSMathInvert- 表示用作calc(1 / <value>)的 CSScalc()值。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。否则返回 falseCSSNumericValue.to- 将value转换为具有指定*单位*的其他值。CSSNumericValue.toSumCSSNumericValue.typeCSSNumericValue.parse- 从 CSS 字符串解析数字并返回。
CSSPositionValue-
表示需要位置的属性值,例如 object-position。
CSSTransformValue-
一个表示
transform列表值的接口。它们“包含”一个或多个CSSTransformComponent,这些组件表示单个transform函数值。 CSSUnitValue-
一个表示可以表示为单个单位或命名数字和百分比的数值的接口。
CSSUnparsedValue-
表示引用自定义属性的属性值。它包含字符串片段和变量引用的列表。
规范
| 规范 |
|---|
| CSS 类型化 OM Level 1 # stylevalue-objects |
| CSS 类型化 OM Level 1 # the-stylepropertymap |
| CSS 类型化 OM Level 1 # cssunparsedvalue |
| CSS 类型化 OM Level 1 # keywordvalue-objects |
浏览器兼容性
api.CSSStyleValue
加载中…
api.StylePropertyMap
加载中…
api.CSSUnparsedValue
加载中…
api.CSSKeywordValue
加载中…