SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Framework CSS

    I am creating a javascript framework just to see how its done. I have come to css, at the moment it consists of loads of if statements e.g.
    Code JavaScript:
    function (propertyName, value) {
        if (propertyName == "background") {
            element.style.background = value;
        }
        else if (propertyName == "border") {
            element.style.border = value;
        }
    }
    and so on.

    There must be a better way. HELP!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is where you find out about dot notation and bracket notation, which is a neat feature of JavaScript.

    These things are effectively the same:

    Code javascript:
    element.style.background = value;
    element['style'].background = value;
    element['style']['background'] = value;

    So you can just do this:

    Code javascript:
    function (propertyName, value) {
       element.style[propertyName] = value;
    }

    You have to make sure people are using the right propertyName. For example in CSS it's "line-height" and in JavaScript's style object it's lineHeight. It gets worse because it's styleFloat in IE but cssFloat in non-IE browsers. So make sure what's getting given to the function has the right syntax!

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great thanks, and now I've learnt some more javascript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •