JavaScript Framework CSS

JavaScript
1

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.

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

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:

element.style.background = value;
element['style'].background = value;
element['style']['background'] = value;

So you can just do this:

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

That’s great thanks, and now I’ve learnt some more javascript