时间戳

首页 > 解决方案 > 可以依靠 CSSStyleDeclaration.setProperty() 来验证 CSS 属性吗？

javascript - 可以依靠 CSSStyleDeclaration.setProperty() 来验证 CSS 属性吗？

问题描述

以下似乎在主要浏览器上是一致的：

const stylesheet = document.createElement('style');
document.head.appendChild(stylesheet);

const sheet = document.styleSheets[0];
sheet.addRule('.temp', '{}', 0);
const style = sheet.cssRules[0].style;

console.log(style.color); // ""
style.setProperty("color", "*****");
console.log(style.color); // ""
style.setProperty("color", "red")
console.log(style.color); // "red"

但我想知道：可以style.setProperty("color", "*****")依靠不设置属性，或者这只是目前主流浏览器上的一个巧合一致的功能。

标签： javascriptcssdom

解决方案

如果“依赖”你的意思是它在标准中指定，而不是它是。

相关标准是 CSSOM 和setProperty它说

  1. 令组件值列表为属性属性解析值的结果。
  2. 如果组件值列表为空，则终止这些步骤。

并解析它所说的值

  1. 令 list 为通过调用 parse a list of component values from value 返回的值。
  2. 匹配列表与 CSS 规范中属性属性的语法。
  3. 如果上述步骤失败，则返回 null。
  4. 返回列表。

因此提供“*****”不在允许的颜色值列表中，将返回 null

然后为了得到style.color，它说

骆驼大小写属性属性在获取时必须返回调用 getPropertyValue() 的结果，参数是对骆驼大小写属性的 CSS 属性算法运行 IDL 属性的结果。

然后对于getPropertyValue()它说

  1. 如果 property 是声明中 CSS 声明的属性名称的区分大小写匹配，则返回调用 serialize a CSS value 的结果并终止这些步骤。

最后，空值被序列化为空字符串。

推荐阅读