以下两者似乎都有效:
element.style.WebkitFlex = 1;
element.style.webkitFlex = 1;
但是哪种语法是标准的?
以下两者似乎都有效:
element.style.WebkitFlex = 1;
element.style.webkitFlex = 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
属性为如何解析数据属性定义了类似的规则。
由于这与样式属性有关,我们应该使用与 CSS 属性一起使用的已建立的驼峰式表示法。
所有与样式相关的属性命名如下:
字体变体 行高 字母间距 字间距 文本对齐
所以我们应该坚持既定的做法。