Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Confused about style naming

Reply
Thread Tools

Confused about style naming

 
 
listerofsmeg01@hotmail.com
Guest
Posts: n/a
 
      10-23-2006
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

 
Reply With Quote
 
 
 
 
web.dev
Guest
Posts: n/a
 
      10-23-2006

(E-Mail Removed) wrote:
> 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.

 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      10-23-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

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

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
Peter Michaux
Guest
Posts: n/a
 
      10-23-2006

(E-Mail Removed) wrote:
> 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

 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      10-23-2006
(E-Mail Removed) wrote:
> 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.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com


 
Reply With Quote
 
listerofsmeg01@hotmail.com
Guest
Posts: n/a
 
      10-24-2006
Peter Michaux wrote:
> (E-Mail 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.

 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      10-24-2006
(E-Mail 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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Confused about Assembly naming with Namespace Elmo Watson ASP .Net Building Controls 0 09-07-2007 08:22 PM
Confused about assembly naming with Namespace Elmo Watson ASP .Net Web Controls 0 09-07-2007 02:51 AM
while executing my client program i get the exception javax.naming.LinkException: [Root exception is javax.naming.LinkException: [Root exception is javax.naming.NameNotFoundException: remaining if plz anybody know how to solve this problem then mahesh Java 0 03-08-2007 12:26 PM
Javax.naming Exception: name not found in naming service. Harman Java 1 07-28-2006 08:51 AM
Need help with Style conversion from Style object to Style key/value collection. Ken Varn ASP .Net Building Controls 0 04-26-2004 07:06 PM



Advertisments