javascript - vendor 前缀中的大驼峰式与小驼峰式

Question

以下两者似乎都有效:

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

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

Answer 1

第一个，

element.style.WebkitFlex = 1;

是首选语法。至reference vendor-prefixed CSS properties在 JavaScript 内部使用非规范化的精确 CSS 属性名称时，我们必须依赖括号表示法的使用:

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

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

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

这样，element.style['-webkit-flex'] = 1;就变成了

element.style.WebkitFlex = 1;

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

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

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

作为this answer解释说，这个规范化程序在某些图书馆的幕后应用，包括 jQuery ,等等。

可以在规范的其他部分中看到此类过程的更多证据。例如，HTML5 dataset property定义 similar rules了解如何解析数据属性。