JavaScript `style` 属性名称从何而来？答案

【问题标题】：Where do the JavaScript `style` property names come from?JavaScript `style` 属性名称从何而来？
【发布时间】：2017-02-08 19:27:03
【问题描述】：

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

但后来我遇到了...style.cssFloat。哼。这根本不符合这条规则。

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

（我开始深入研究 Mozilla DOM 文档，但似乎无法挖掘出那个神秘的列表。）

【问题讨论】：

document.getElementById("sweetDiv").style.setProperty('float', 'left')
大家好，澄清一下，我不是在寻找任何一种特定的样式属性，而是在寻找它们的全部范围（如果存在）。再次感谢！
我不明白为什么这个问题如此被否决。这是一个合理的问题，对于新手来说，答案一点也不明显。谷歌也不容易。

标签： javascript css

【解决方案1】：

MDN says of cssFloat:

注意：如果您在 JavaScript 中将此属性称为 element.style 对象的成员，则必须将其拼写为 cssFloat。另请注意，Internet Explorer 版本 8 及更早版本拼写为 styleFloat。这是一个例外，即 DOM 成员的名称是用破折号分隔的 CSS 名称的驼峰式名称（这是因为“float”是 JavaScript 中的保留字，与需要将“class”转义为“className”并将“for”转义为“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 对象的唯一例外，尽管上面的注释包括 DOM 规范中其他地方存在的其他一些例外。对于所有其他属性，只需使用“带连字符的 CSS 名称的驼峰式版本”的正常语法转换即可。这种转换在CSSOM spec 中被形式化为“CSS 属性到 IDL 属性算法”（反之亦然）。

总而言之，JavaScript 中每个style 属性（即CSSStyleDeclaration 类型）中的对象不需要特定的引用，因为它与一般的CSS 规则名称信息没有区别。唯一的例外是cssFloat，您显然已经找到了。

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

【讨论】：

再一次，他不是在寻求有关该属性的帮助，而是寻求整个 css 选项的帮助。
@apsillers，谢谢！我想我明白了你和 Our_Benefactors 在说什么......我没有意识到 DOM 明确指出有一条规则“......DOM 成员的名称是破折号的驼峰式名称- 分隔的 CSS 名称...”（并且某些保留字有点搞砸了）。您能否发布找到该引文的链接？
@BeckyDot 哎呀，是的；我刚刚将它编辑到我的开场白中。我还添加了 CSSOM 规范的链接，其中转换算法被形式化。
@JonGlazer 添加了一个指向 CSSOM 规范的链接，该规范规范了 CSS 规则名称和 JS 属性之间的映射，我认为这立即完全满足了 OP 的问题，并且还表明这不是一个题外资源请求，因为它是题中的“规范如何形式化......？”要求。不过，它可能会进行大量编辑以使其更加清晰
嘿，再次感谢！这真的回答了我的问题！ 竖起大拇指！

【解决方案2】：

来自 WC3：注意：CSS“float”属性在 JavaScript 中称为“cssFloat”，因为“float”是 JavaScript 中的保留字。

所以 99.9% 的样式只是 style.whatever，cssFloat 是这个规则的一个特殊例外。

您可以在此处找到详尽的 CSS 规范：https://www.w3.org/Style/CSS/specs.en.html，但请注意，它对读者不太友好。

【讨论】：

他要求的是参考而不是我认为的那个属性。虽然如果你提供参考，你会被否决。
@Our_Benefactors，谢谢！你提到，“所以 99.9% 的样式只是 style.whatever，cssFloat 是这条规则的一个特殊例外。”但是没有人的名单吗？任何地方？哈哈...我觉得这样可以节省大量排查虚构代码的时间。