[thelist] Re-defining CSS via Javascript

Matthew Bernhardt bernhardt.7 at osu.edu
Mon Feb 19 08:44:38 CST 2007

Hello all,

In response to my original question:

>>   I'm wondering whether/how its possible to re-write CSS styles via  
>> Javascript? I read the SwitchyMcLayout article on ALA, and it got me  
>> thinking - could I change the z-index of a div based on the window size  
>> of the browser?

Christian Heilmann <codepo8 at gmail.com> wrote:

> Generally you can change the z-index of an element with the style
> property. Say if your element has the ID "main" it'll be:
> var obj = document.getElementById('main');
> obj.style.zIndex = 100;
> You can read the window size of the browser with window.innerWidth.
> These examples should get you on the way:
> http://beginningjavascript.com/Chapter5/index.html
> Easiest would be a demo URL though.

Thanks! I'll definitely check out the link (and the book). After I sent  
the original message, I kept mucking about and got the following test case  
to behave generally how I wanted:


I ended up defining three different classes for each of the divs on the  
page (banner, menu, and content) - and the javascript re-assigns classes  
to each element based on the page width. This actually works out a bit  
better than simply changing the z-index as I can change the positioning of  
the content block to prevent side-scrolling.

Of course, I welcome feedback on this technique - I'd like to integrate  
this into this (currently development) site sometime this week:


I'd solicited feedback about this site here a week or so ago, and have  
been working my way through the feedback received. Many thanks to everyone  
who contacted me.


Matt Bernhardt, bernhardt.7 at osu.edu
Webmaster  +  Fab  Lab  Coordinator
Knowlton  School   of  Architecture
The    Ohio     State    University

More information about the thelist mailing list