element.style使用连字符属性键的跨浏览器兼容性与规范问询

核心结论 #

• 你发现的连字符形式属性键写法不是Firefox的独有实现，是W3C CSSOM规范明确约定的标准行为，所有主流现代浏览器（Chrome、Safari、Edge、Firefox 等）均完全兼容
• 驼峰格式与连字符格式的属性键指向同一个样式值，读写操作完全同步，不存在任何差异

规范依据 #

element.style是CSSStyleDeclaration接口的实例，CSSOM规范中针对该接口的命名属性读写逻辑有明确规定：

1. 当传入驼峰格式的属性名时，浏览器会自动将其转换为对应带连字符的CSS原生属性名，再执行读写操作
2. 当传入带连字符的原生CSS属性名时，浏览器会直接匹配对应样式值执行操作
   两种写法本质上操作的是同一份内部存储的样式数据，天然保持同步。

兼容性验证 #

你可以在任意主流浏览器控制台执行以下测试代码，结果完全一致：

const testEl = document.createElement('div');
// 驼峰格式赋值
testEl.style.fontSize = '14pt';
console.log(testEl.style['font-size']); // 输出 "14pt"

// 连字符格式赋值
testEl.style['font-weight'] = 'bold';
console.log(testEl.style.fontWeight); // 输出 "bold"

场景使用建议 #

在需要遍历样式属性的场景下，CSSStyleDeclaration的迭代器默认返回的就是带连字符的原生CSS属性名，你可以直接用返回值作为键访问，无需额外做驼峰转换，可以大幅简化代码逻辑。

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