[thelist] Re-defining CSS via Javascript

Matthew Bernhardt bernhardt.7 at osu.edu
Wed Feb 14 13:05:37 CST 2007

  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:

.menu { z-index: 3; }
.contentlow { z-index: 2; }
.contenthigh { z-index: 4; }

<div class="menu">(menu HTML)</div>
<div class="contentlow">(content HTML)</div>
(other divs and HTML)

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).

bernhardt.7 at osu.edu

More information about the thelist mailing list