When changing the appearance of a site through the use of JavaScript, we usually see developers either switch the stylesheet of the page or change the class of an element. And then, on occasion, we see the practice of changing appearance right in the JavaScript with the style property. On their own, these methods are all fairly reliable, but they don’t play too nicely together.
CSS Priorities
It’s important to look at the different priorities placed on each type of CSS implementation when considering how to dynamically change the appearance of a site, . In addition to the 3 mentioned in that link, you can also set CSS with JavaScript.
- External styles are on another page, and are included.
- Embedded styles override external styles.
- Inline styles override both embedded and external styles.
- Styles modified with JavaScript override all other styles.
Making Them Work Together
Given these different approaches, the goal is to make it so they work together regardless of when they occur or are implemented. As it stands, if you were to implement a JavaScript style and then afterwards change the external stylesheet on the fly, the changes found in the new stylesheet will not stick because the original JavaScript change overrides everything. Basically, we have to find a way to undo the changes we make with JavaScript.
While there is still no ideal solution, it turns out you can erase both JavaScript modified and inline styles, which will then cause the rules found in embedded and external stylesheets to hold. Let’s go through an example of the problem.
Load the page with a stylesheet that has a blue background:
<link rel="stylesheet" href="/test/blue.css" type="text/css" id="ss" />
Page background is now blue. Next, we will change it with JavaScript.
el = document.getElementById('pageBody');
el.style.backgroundColor = 'red';
Page background is now red. Lastly, we’ll switch stylesheets to one with a green background.
document.getElementById('ss').href = '/test/green.css';
The background is still red, and has not turned to green. This is because the JavaScript setting in step 2 still overrides the external stylesheet. Also note that if you switch styles with this method, the same result occurs. If we want the background to turn to green, we have to erase what we set in JavaScript. To do this in Firefox and IE, use the code below before applying the new sheet:
el = document.getElementById('pageBody');
el.removeAttribute('style');
And in Safari:
el = document.getElementById('pageBody');
el.style.backgroundColor = null;
This will cause the new changes to hold. Keep in mind that the IE/Firefox version will erase everything you have set with JavaScript, not just the background color. Even though this is not a sexy approach, it does provide a work around that opens up some more options for web sites.
A tip for those trying to change x and y coordinates (through element.style.top & element.style.left) of an element: do not forget to add the unit (px/em/…):
Another great resource while fiddling around on elements is the Gecko DOM Reference, over at http://developer.mozilla.org/en/docs/Gecko_DOM_Reference (mostly applicable for IE too; but better check MSDN too).
Happy scripting!
Ryan,
You may want to direct your readers to the discussion of CSS specificity as well, since specificity has a profound affect on which rules get applied. Of note is the fact that a rule applied to an id (body#foo { property: value }) will override even a later rule applied to a class (body.testClass { property: value }).
The point of your article - modifying the style attribute with Javascript - stands, but knowing the whys of this stuff is vital to knowing when to use the various methods.
Cheers,
—Steve
Everyone needs a hug.
i want to add a color.
Give me a hug too?
Everyone needs a hug.
Everyone needs a hug.
Everyone needs a hug.
Very good article ;) Congrats!
Hey dude! You have just ended my 5 hour search for this exact solution. Saying thanks is too little….
i love it, simple and easy, thanks.
Everyone needs $.
Thanks Bramus, adding “px” solved all my problems!
Is there a way to dynamically define a class? I have a script that generates the CSS inline styles and on rollover, I want to dynamically create a class and have it assigned to the element. That is, the class is not hard coded anywhere, it’s generated on the fly and assigned on the fly (rather than assigning the individual elements).
Moo-Choo-Grassy-Ass!
This also works in IE and Firefox:
It uses an empty string instead of
nullEvelyne feeds a bug.
alert(“too bad”) hey!
thank you :)
do you have examples of writing to cookies so that a customer would keep his choice of style so that when he visit the site next time the site will know his style preference?
Everyone needs a hug and a smile.