Confused about style naming

Discussion in 'Javascript' started by listerofsmeg01@hotmail.com, Oct 23, 2006.

  1. Guest

    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
    , Oct 23, 2006
    #1
    1. Advertising

  2. web.dev Guest

    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.
    web.dev, Oct 23, 2006
    #2
    1. Advertising

  3. 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/
    Martin Honnen, Oct 23, 2006
    #3
  4. 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
    Peter Michaux, Oct 23, 2006
    #4
  5. Matt Kruse Guest

    Matt Kruse, Oct 23, 2006
    #5
  6. Guest

    Peter Michaux wrote:
    > 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.
    , Oct 24, 2006
    #6
  7. 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>
    Michael Winter, Oct 25, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bartek
    Replies:
    6
    Views:
    347
    bartek
    Apr 5, 2004
  2. Harman
    Replies:
    1
    Views:
    2,489
    Moiristo
    Jul 28, 2006
  3. Ken Varn
    Replies:
    0
    Views:
    428
    Ken Varn
    Apr 26, 2004
  4. Elmo Watson

    Confused about Assembly naming with Namespace

    Elmo Watson, Sep 7, 2007, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    701
    Elmo Watson
    Sep 7, 2007
  5. Elmo Watson

    Confused about assembly naming with Namespace

    Elmo Watson, Sep 7, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    137
    Elmo Watson
    Sep 7, 2007
Loading...

Share This Page