为何fontSize生效而font-size无效？DevTools标题字号修改疑问

嘿，这个问题问到点子上了！其实这背后是JavaScript语法规则和DOM Style API设计共同决定的，我给你拆解一下：

• JavaScript标识符不允许短横线
  在JS里，变量/对象属性名（也就是标识符）不能包含短横线-，因为短横线会被解释成减法运算符。你试的heading.style.font-size = '2em';，JS会把它解析成heading.style.font - size = '2em'——这里font是style对象的一个不存在的属性，然后减去未定义的size变量，不仅不会生效，还会抛出ReferenceError错误。

• DOM Style API的驼峰命名映射
  浏览器提供的HTMLElement.style对象，特意把CSS的短横线命名属性（kebab-case）转换成了JS支持的驼峰命名（camelCase）来做映射。比如：

  • CSS的font-size → JS里的fontSize
  • CSS的background-color → JS里的backgroundColor
    这样既避开了JS的语法限制，又能清晰对应到原生CSS属性。

• 小技巧：用方括号语法也能写短横线
  如果你非要用CSS原生的短横线写法，其实可以用方括号访问属性：

  heading.style['font-size'] = '2em';
  

  因为方括号里可以用字符串作为属性名，不受标识符规则限制，这样写也能生效，不过日常开发里驼峰式更符合JS的编码习惯哦。

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