Re: Modifying stylesheet properties through JS

by Andrew McFarland <aamcf(at)aamcf.co.uk>

 Date:  Wed, 15 Jan 2003 21:19:26 +0000
 To:  hwg-languages(at)hwg.org
 References:  localhost
  todo: View Thread, Original
At 20:38 15/01/03 +0000, Andrew McFarland wrote:

>The solution is quite easy: wrap the javascript in a function and call 
>that function in an onload for the body. That way the javascript isn't 
>called until the element is there.

There is a more elegant solution - see 
http://aamcf.co.uk/temp/interested_new.html.

Basically, I have

   o Replaced the id="first" and id="second" with class="first" 
class="second" and added corresponding styles to a style element (these 
should be incorporated into the main CSS)

   o Replaced the original JavaScript with:

<script type="text/javascript">
<!-- hide from old browsers
//disable the CSS 'tables' in IE due to a rendering bug
if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
   {
   document.write('<style type="text/css">div.row span {float:none; }</style>')
   } // end if
// end hiding -->
</script>

This then only adds another style element when the browser is IE. It 
overrides the earlier rules, giving the desired effect.

I'm sure I could come up with something even more elegant[1], given the 
time :-)

Andrew

--
http://aamcf.co.uk/

[1] I'm not keen on the nature of the hack: using JavaScript to change the 
document to compensate for browser bugs with CSS is high maintenance (you 
have to look in 2 places to change the layout), and not all that accurate( 
this method relies on navigator.appName , which is trivial to spoof, 
`fixes' versions of IE that aren't broken, and falls over when CSS is 
enabled and JS is not)

HWG: hwg-languages mailing list archives, maintained by Webmasters @ IWA