供應商前綴中的上部駝峰案例與較低的駝峰案例

Question

以下兩者似乎都有效：

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

但哪種語法是標​​准的？

Answer 1

首先，

element.style.WebkitFlex = 1;

是首選語法。 要在使用非規范化的精確CSS屬性名稱時引用 JavaScript內部的供應商前綴CSS屬性 ，我們必須依賴括號表示法的使用：

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

不幸的是，這是相當笨拙的。 點符號為這些情況提供了更好的表現，正是出於這種精神，我們還能夠使用它們的camelCased對應物來引用供應商前綴屬性。

在標准化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等。

在規范的其他部分可以看到這種程序的進一步證據。 例如， HTML5 dataset屬性定義了如何解析數據屬性的類似規則 。

Answer 2

由於這與style屬性有關，我們應該使用與CSS屬性一起使用的已建立的camel case表示法。

所有與樣式相關的屬性都如下所示：

font-variant line-height字母間距字間距text-align

所以我們應該堅持既定的做法。