1

I have been learning about changing css options via javascript, like: document.getElementById("sweetDiv").style.fontSize and ...style.backgroundColor, whose naming conventions seem to make sense: it's a camel-case version of a hyphenated CSS name.

But then I ran into ...style.cssFloat. Hmph. this doesn't follow that rule at all.

Since there appear to be at least one surprising exception to that general rule, where I can find a list of all of the different JavaScript css-styling options? Lest this be misunderstood as a resource request, my real question is: how do/did browsers decide what to call the properties of the JavaScript style object when mapping onto CSS names? Where is this behavior specified? What is the rhyme or reason to it, if any?

(I started digging through the Mozilla DOM docs but couldn't seem to unearth that mythical list.)

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • document.getElementById("sweetDiv").style.setProperty('float', 'left') – Álvaro Touzón Feb 08 '17 at 19:29
  • 1
    Hi guys, so just to clarify, I'm not looking for any one specific styling property, but the whole gamut of them, if it exists. Thanks, again! –  Feb 08 '17 at 19:34
  • I don't understand why this question is so downvoted. It's a legitimate question, the answer to which is not at all obvious to new-comers. It's also not easy to Google. – Sandy Gifford May 21 '17 at 17:21

2 Answers2

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").

This is because ECMAScript 3 disallowed property access with a dot operator if the property name was a reserved word in the language. For example, doing foo.function or bar.if raised an error. Similarly, float was a reserved word in ES3 (in the expectation that it may be used by the language in the future), so any access of the form baz.float was syntactically invalid.

To compensate for this, browsers used cssFloat (or styleFloat in IE8) to avoid having a property named float. This is the only exception I know of for the style object, though the note above includes some others that exist elsewhere in the DOM specification. For all other properties, simply use the normal syntax conversion of "camel-cased version of the hyphenated CSS name." this conversion is formalized in the CSSOM spec as the "CSS property to IDL attribute algorithm" (and vice versa for the reverse).

In summary, you don't need a specific reference for the object in each style property (namely, the CSSStyleDeclaration type) in JavaScript, because it's no different from information about CSS rule names generally. The one single exception is cssFloat, and you've obviously already found that one.

If you interested in a complete listing of all supported property names for style in any given browser, do Object.keys(document.createElement("div").style).

Community
  • 1
  • 1
apsillers
  • 112,806
  • 17
  • 235
  • 239
  • 1
    Again, he's not asking for help with that property, but with the css options as a whole. – Jon Glazer Feb 08 '17 at 19:41
  • @apsillers, thank you! I think I'm gettin' what you and Our_Benefactors are saying... I didn't realize the DOM specifically states that there is a rule "...that the name of the DOM member is the camel-case name of the dash-separated CSS name..." (and that certain reserved words muck this up a bit). Are you able to post the link where you found that quotation? –  Feb 08 '17 at 19:49
  • @BeckyDot Oops, yes; I have just edited it into my opening line. I also added link to the CSSOM spec where that conversion algorithm is formalized. – apsillers Feb 08 '17 at 19:56
  • @JonGlazer Added a link to the CSSOM specification that formalizes the mapping between CSS rule names and JS properties, which I think at once fully satisfies the OP's question and also demonstrates that this isn't so much an off-topic resource request as it is an on-topic "How does the specification formalize...?" request. It could probably be edited substantially to make that more clear, though – apsillers Feb 08 '17 at 19:58
  • Hey, thanks again! That really answers my question! *thumbs up*! –  Feb 08 '17 at 20:03
0

From WC3: Note: The CSS "float" property is called "cssFloat" in JavaScript, because "float" is a reserved word in JavaScript.

So 99.9% of styles will just be style.whatever, cssFloat is a special exception to this rule.

You can find the exhaustive CSS specifications here: https://www.w3.org/Style/CSS/specs.en.html but be warned, it's not very friendly to the reader.

Our_Benefactors
  • 3,220
  • 3
  • 21
  • 27
  • He's asking for a reference not what that property is I believe. Although if you give a reference you'll be down-voted. – Jon Glazer Feb 08 '17 at 19:34
  • @Our_Benefactors, Thanks! You mentioned, "So 99.9% of styles will just be style.whatever, cssFloat is a special exception to this rule." But isn't there a list someone? Anywhere? Haha... I feel like this would save alot of time trouble-shooting fictitious code. –  Feb 08 '17 at 19:41