javascript - 供应商前缀中的大驼峰大小写与小驼峰大小写

Question

以下两者似乎都有效：

element.style.WebkitFlex = 1;
element.style.webkitFlex = 1;

但是哪种语法是标​​准的？

Answer 1

首先，

element.style.WebkitFlex = 1;

是首选语法。要在 JavaScript 中引用供应商前缀的 CSS 属性，同时使用非规范化的准确 CSS 属性名称，我们必须使用括号表示法：

element.style['-webkit-flex'] = 1;

不幸的是，这相当笨拙。点表示法更适合这些情况，正是本着这种精神，我们还能够使用驼峰命名法来引用供应商前缀的属性。

在 CSS 和 JavaScript 之间规范化属性名称的过程中，破折号被识别为分隔符。显然，它们在生成的 camelCased 属性名称中被完全解析出来，但仍然被考虑在内。特别是，（定界）破折号表示在何处应用不同的大小写（即，大写字母）。而且，即使它们不是字母字符，破折号也会占据（大多数）供应商前缀 CSS 属性的第一个位置，这意味着特定供应商的名称前缀变为大写。此过程也在此处进行了说明。

因此，element.style['-webkit-flex'] = 1;变成

element.style.WebkitFlex = 1;

类似的规则适用于其他供应商，这样我们也可以...

element.style.MozTransition = 'width 1s 0s ease-in-out';

element.style.OTransform = 'scaleX(1.5)';

正如这个答案所解释的，这个规范化过程在某些库中应用，包括jQuery等等。

在规范的其他部分可以看到这种程序的进一步证据。例如，HTML5dataset属性为如何解析数据属性定义了类似的规则。

Answer 2

由于这与样式属性有关，我们应该使用与 CSS 属性一起使用的已建立的驼峰式表示法。

所有与样式相关的属性命名如下：

字体变体 行高 字母间距 字间距 文本对齐

所以我们应该坚持既定的做法。