javascript - JavaScript `style` 属性名称从何而来？

Question

我一直在学习如何通过 javascript 更改 css 选项，例如:document.getElementById("sweetDiv").style.fontSize 和 ...style.backgroundColor，其命名约定似乎很有意义:它是带连字符的 CSS 名称。

但后来我遇到了 ...style.cssFloat。哼。这根本不遵循该规则。

由于该一般规则似乎至少有一个令人惊讶的异常(exception)，我在哪里可以找到所有不同 JavaScript css 样式选项的列表？以免这被误解为资源请求，我真正的问题是:浏览器如何决定在映射到 CSS 名称时调用 JavaScript style 对象的属性？在哪里指定此行为？如果有的话，它的韵律或原因是什么？

(我开始挖掘 Mozilla DOM 文档，但似乎无法挖掘出那个神秘的列表。)

Answer 1

MDN says of cssFloat :

Note: If you're referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape 's "for" as "htmlFor").

这是因为ECMAScript 3 disallowed property access with a dot operator if the property name was a reserved word在语言中。例如，执行 foo.function 或 bar.if 会引发错误。类似地，float 是 ES3 中的保留字(期望它可能在未来被该语言使用)，因此任何形式的访问 baz.float 都是语法无效。

为了弥补这一点，浏览器使用 cssFloat(或 IE8 中的 styleFloat)来避免具有名为 float 的属性。这是我所知道的 style 对象的唯一异常(exception)，尽管上面的说明包括 DOM 规范中其他地方存在的一些其他情况。对于所有其他属性，只需使用“带连字符的 CSS 名称的驼峰式版本”的正常语法转换。此转换在 CSSOM spec 中正式化作为“CSS 属性到 IDL 属性算法”(反之亦然)。

总而言之，在 JavaScript 中，您不需要对每个 style 属性(即 CSSStyleDeclaration 类型)中的对象进行特定引用，因为它与一般有关 CSS 规则名称的信息。唯一的异常(exception)是 cssFloat，您显然已经找到了。

如果您对任何给定浏览器中 style 的所有受支持属性名称的完整列表感兴趣，请执行 Object.keys(document.createElement("div").style).