Confused about style naming

[listerofsmeg01]

Hi,

When specifying say, background color in CSS, I use:

background-color:red;

However, after much head scratching when trying to set it dynamically
via the DOM, I found I need to spell it

node.style.backgroundColor = "red";

Why the difference in attribute spelling? I presume I am missing
something fundamental?

Many thanks,
Lister

 

[web.dev]

Hi,

When specifying say, background color in CSS, I use:

background-color:red;

However, after much head scratching when trying to set it dynamically
via the DOM, I found I need to spell it

node.style.backgroundColor = "red";

Why the difference in attribute spelling? I presume I am missing
something fundamental?

It's not really a different spelling. However, take note that if you
have a hyphen think of the consequences. It will be mistaken as a
subtraction in javascript. Thus if any attribute has a hyphen, it is
the case that it will be removed and the following word is capitalized.

 

[Martin Honnen]

However, after much head scratching when trying to set it dynamically
via the DOM, I found I need to spell it

node.style.backgroundColor = "red";

Why the difference in attribute spelling? I presume I am missing
something fundamental?

Well the character '-' is the substraction operator in JavaScript e.g.
3 - 1
or
3-1
makes sense but
node.style.background-color
is the same as
node.style.background - color
and that does not make sense. That is why CSS 'property-name' ends up as
'propertyName' in the DOM script.

Some browsers (e.g. Mozilla, Opera) will also allow you to call e.g.
element.style.setProperty('background-color', 'lightblue', '')
see
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration>
but IE (4/5/6/7) does not attempt to support that.

 

[Peter Michaux]

Hi,

When specifying say, background color in CSS, I use:

background-color:red;

However, after much head scratching when trying to set it dynamically
via the DOM, I found I need to spell it

node.style.backgroundColor = "red";

All the css properties work this way except float.

node.style.cssFloat = "left";

Just a heads up.

Peter

 

[Matt Kruse]

node.style.backgroundColor = "red";

The other responses are correct, of course, but I suggest you use a wrapper
around this functionality.
For example, my util.js at
http://www.javascripttoolbox.com/lib/util/

provides a generic method like this:

CSS.set(node,"background-color","red");

This will handle the covnersion to camelCase and also special cases like
float and opacity.

 

[listerofsmeg01]

(e-mail address removed) wrote:
All the css properties work this way except float.

node.style.cssFloat = "left";

Just a heads up.

Peter

Many thanks. I also (after more head scratching) see that "class"
becomes "className".
Is there an official list of these somewhere? I'm not sure whether it
falls under the W3C DOM spec, or the CSS specs? :?

Thanks for everyones help. It is much appreciated.

 

[Michael Winter]

(e-mail address removed) wrote:

[snip]

I also (after more head scratching) see that "class"
becomes "className".

Yes. The W3C DOM has bindings for languages where identifiers like
'class' and 'float' are reserved words (both are future reserved words
in ECMAScript).

Is there an official list of these somewhere?

The W3C DOM Recommendations list all of the properties for each module
description, including bindings for languages, including ECMAScript.

I'm not sure whether it falls under the W3C DOM spec, or the CSS
specs? :?

The former, though the CSS Recommendations provide the definition of
those properties. The various style properties are listed in section 2.3
CSS2 Extended Interface[1].

Mike

[1] <http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-extended>