[thelist] Re-defining CSS via Javascript

Stephen Rider evolt_org at striderweb.com
Sat Feb 17 11:33:44 CST 2007

Go track down a book called "DOM Scripting", published by "Friends of  
Ed".  It's a *GREAT* primer on manipulating a web page (including  
CSS) using JavaScript.

Short on time or I'd give you a link....


On Feb 14, 2007, at 1:05 PM, Matthew Bernhardt wrote:

> Hello,
>   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?
>   The context is that I've been working on a site where the menu  
> block and content block overlap. The menu sits on top of the  
> content block, and for most window sizes there's no issue - the  
> overlap is about 8 pixels. However, on very small window sizes the  
> overlap gets much more pronounced, causing the content to more  
> completely slide under the menu - obscuring the content. In those  
> situations, I'd like to be able to push the content on top of the  
> menu. Is this possible?
>   I suppose this could either be by switching the class of the  
> content block, so there'd be:
> CSS:
> .menu { z-index: 3; }
> .contentlow { z-index: 2; }
> .contenthigh { z-index: 4; }
> <body>
> <div class="menu">(menu HTML)</div>
> <div class="contentlow">(content HTML)</div>
> (other divs and HTML)
> </body>
> with a window.onresize call similar to the SwitchyMcLayout example?  
> I'm not sure if this would work, though, as how would I write the  
> Javascript to only swap the content div's class? I'm still very new  
> to Javascript in general, so I'm not sure if this is easy/ 
> impossible to do or not. My initial thought would be to use an id  
> attribute - which would allow me (I believe) to use  
> document.getElementById() - but I've had problems before with CSS  
> in that case and IE not picking up on styles correctly.
> Thoughts? I can provide a test page if necessary tomorrow (snowed  
> in at home today, surfing and doing research).
> Thanks,
> Matt
> bernhardt.7 at osu.edu
> -- 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

More information about the thelist mailing list