CODEWITHSUNDEEP
javascriptcss
user7536386
user7536386

Reputation:

Where do the JavaScript `style` property names come from?

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

Upvotes: 1

Views: 751

Answers (2)

apsillers
apsillers

Reputation: 115950

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

Upvotes: 1

Our_Benefactors
Our_Benefactors

Reputation: 3539

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.

Upvotes: 0

Related Questions