如何校验字符串是否为HTML元素style属性的合法属性名与属性值

浏览器原生没有提供可直接返回某CSS属性所有合法取值的公开API，但可以借助DOM Style对象的原生特性，实现高准确率的属性名、属性值合法性校验，完全适配当前运行浏览器的兼容规则，具体实现如下：

1. 合法CSS属性名校验 #

实现原理 #

所有当前浏览器支持的合法CSS属性，都会在DOM元素的style对象上挂载对应字段：CSS标准里的连字符写法（如background-color）会自动转换为驼峰命名（对应backgroundColor），可以通过这个特性判断属性名是否合法，不需要维护静态的属性名列表，会自动适配浏览器新增的CSS特性。

校验代码 #

function isValidCssProperty(propName) {
  // 创建临时离屏元素，不会插入页面、不影响现有渲染
  const tempElement = document.createElement('div');
  // 统一把连字符写法转为驼峰写法，兼容两种输入格式
  const camelCaseProp = propName.replace(/-([a-z])/g, (match, char) => char.toUpperCase());
  return camelCaseProp in tempElement.style;
}

2. 合法CSS属性值校验 #

实现原理 #

浏览器本身会对CSS赋值做合法性校验：如果给样式属性设置了非法值，浏览器会直接忽略该次赋值，对应属性的值会保持空字符串，利用这个原生行为就能判断属性值是否合法。

校验代码 #

function isValidCssValue(propName, propValue) {
  // 属性名本身不合法的话直接返回false
  if (!isValidCssProperty(propName)) return false;
  const tempElement = document.createElement('div');
  const camelCaseProp = propName.replace(/-([a-z])/g, (match, char) => char.toUpperCase());
  // 尝试赋值
  tempElement.style[camelCaseProp] = propValue;
  // 赋值后属性值不为空，说明浏览器识别为合法值
  return tempElement.style[camelCaseProp] !== '';
}

效果示例 #

• 调用isValidCssValue('color', 'red')返回true
• 调用isValidCssValue('color', 'abc123')返回false
• 调用isValidCssValue('display', 'flex')在支持flex布局的浏览器返回true，在极老旧不支持flex的浏览器返回false，校验结果和实际渲染表现完全一致。

3. 关于「获取某属性全部合法取值」的说明 #

目前没有通用、兼容性好的JS API可以直接返回某个CSS属性支持的全部合法取值，核心原因有两点：

• 大部分CSS属性的取值不是固定枚举值：比如长度类属性支持px/rem/vw/%等多种单位+任意数值，颜色属性支持十六进制、rgb、hsl、关键字等多种格式，本身就无法穷举
• 不同浏览器、同一浏览器的不同版本支持的取值范围有差异，即使拿到静态列表也无法适配所有用户的运行环境
  如果是display、position这类取值为固定关键字的属性，可以通过CSSOM规范的底层接口获取枚举列表，但接口兼容性差，不适合在生产环境使用。

4. 生产使用注意事项 #

• 不要硬编码CSS属性、属性值的校验列表，浏览器会持续迭代支持新的CSS特性，硬编码列表很快会出现校验和实际表现不一致的问题
• 校验用的临时元素不需要插入DOM树，几乎没有性能开销，也不会影响页面现有样式
• 代码已经做了命名格式兼容，用户输入background-color或者backgroundColor两种格式都能正常校验
• 校验逻辑完全复用浏览器原生的CSS解析规则，不会出现「校验通过但样式实际不生效」的问题

内容的提问来源于stack exchange，提问作者Monisha