Home > JavaScript > setCSS – CSS Setter

setCSS – CSS Setter

As we all know using CSS we can have any kind of presentational affects (of course supported by CSS) in our web page. Is it possible to make CSS changes through JavaScript? The answer is yes. How this is an important item? Let me explain with an example:

The user clicks on a button and you want to change the background color of a div element. How this can be done:

You can do it in two ways:

1. Get the div element reference and assign a CSS class, which contains the CSS rule for the new background.
2. Dynamically assign the CSS rules/styles for changing the background. In this case there is no CSS stylesheet involved.

The routine that I am going to present is related to the second point that I’ve mentioned above.

How can one change the background color of an div element, it can be done a code like the following:

document.getElementById('mydiv').style.backgroundColor = "#7F3737";

Simple and straightforward, right now think about you need to set multiple CSS rules for the same element. What should we do?

document.getElementById('mydiv').style.backgroundColor = "#7F3737";
document.getElementById('mydiv').style.width = "500px";
document.getElementById('mydiv').style.height = "300px";
document.getElementById('mydiv').style.border = "1px solid #000";

The above code will accomplish the thing that we want to do. If you look at the approach you can see the problem of this approach easily; multiple statements are involved for setting each CSS rule.

The routine that I am going to present will avoid this situation, additionally you may want to assign the same CSS rules to a set of elements and it can be done through this routine. You can either pass the HTML element ID or reference into this routine along with the CSS rule(s) in JavaScript object literal notation, the function will accept the said parameters and apply the CSS rule(s) on the element(s) mentioned.

The JavaScript function source code can be found below:

function setCSS(el, property) {
    if (el && property && typeof property === ‘object’) {
        if (typeof el === ’string’) {
            var els = document.getElementById(el);
        }
        if (typeof el === ‘object’ && el.length && el.length < 0) {
            var els = [];
            for (var i = 0; i  0 && typeof els === ‘object’) {
            for (var i = 0; i < els.length; ++i) {
                for (var j in property) {
                    els[i].style[j] = property[j];
                }
            }
        } else {
            for (var j in property) {
                els.style[j] = property[j];
            }
        }
    }
}

Example

setCSS('myId',{width:"100px",height:"350px",border: "1px solid #000",backgroundColor:"gray"});

The above mentioned code will apply the mentioned CSS rules on the HTML Element whose ID is ‘myId’.

setCSS(['myId1','myId2'],{width:"100px",height:"350px",border: "1px solid #000",backgroundColor:"gray"});

The above mentioned code will apply the mentioned CSS rules on the HTML Elements whose IDs are myId1 and myId2′

Note that the CSS rules you mention is the JavaScript equivalent of CSS rules. As the normal CSS rules as such will not work through JavaScript. You can learn more about these properties through the following link:

https://developer.mozilla.org/en/DOM/CSS

Advertisements
Categories: JavaScript
  1. Thomas
    January 29, 2009 at 3:43 am

    That’s a good handy function you hve out there. am sure it shud be of help to many out there

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: