JavaScriptの `style`プロパティ名はどこから来ますか？

Question

JavaScriptのCSSオプションを変更することについては、 document.getElementById("sweetDiv").style.fontSizeと...style.backgroundColorという名前の規則が理にかなっています。つまり、ハイフン付きのCSS名のキャメルケースバージョンです。

しかし、私は...style.cssFloatに遭遇しました。 Hmph。これはまったくその規則に従わない。

一般的なルールには少なくとも1つの驚くべき例外があります。ここでは、JavaScriptのCSSスタイルオプションのリストをすべて見つけることができます。これはリソースリクエストとして誤解されないようにするために、私の本当の疑問はCSS名にマッピングするときにJavaScript styleオブジェクトのプロパティをブラウザがどのように決めるのか？この動作はどこで指定されていますか？韻や理由は何ですか？

（私はMozillaのDOMドキュメントを掘り始めたが、その神話のリストを発掘するように見えることができませんでした。）

Answer 1

MDN says of cssFloat：

注：あなたがelement.styleオブジェクトのメンバとして、JavaScriptからこのプロパティを参照している場合は、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という形式のアクセスは構文的に無効です。

これを補うために、floatという名前のプロパティを避けるために、ブラウザはcssFloat（またはIE8のstyleFloat）を使用しました。これは、styleオブジェクトについて私が知っている唯一の例外ですが、上記の注記にはDOM仕様の他の部分に存在するものも含まれています。他のすべてのプロパティについては、「キャメルケースのハイフネーションされたCSS名の標準的な構文変換」を使用してください。この変換はCSSOM specで "CSSプロパティからIDLへの属性アルゴリズム"として正式化されます（逆も同様です）。

要約すると、CSSルール名に関する情報と一般的な違いはないので、JavaScript内の各styleプロパティ（つまり、CSSStyleDeclarationタイプ）のオブジェクトの特定の参照は必要ありません。 1つの例外はcssFloatであり、あなたはすでに明らかにしています。

特定のブラウザでstyleのすべてのサポートされているプロパティ名の完全なリストに興味がある場合は、Object.keys(document.createElement("div").style)を実行してください。

Answer 2

をWC3から：注意：CSS「フロート」プロパティがJavaScriptで「cssFloat」と呼ばれ、「理由「float」はJavaScriptの予約語です。

スタイルの99.9％がスタイルになります。何でも、cssFloatはこのルールの特別な例外です。

ここではCSSの完全な仕様を見つけることができます：https://www.w3.org/Style/CSS/specs.en.htmlしかし、それは読者にとってあまり親切ではありません。