3

以下两者似乎都有效:

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

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

4

2 回答 2

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属性为如何解析数据属性定义了类似的规则。

于 2017-07-02T11:33:22.723 回答
-1

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

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

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

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

于 2014-05-23T06:50:34.353 回答