Switching stylesheet - only working on Firefox

philologos

I'm having a problem with some Javascript I've been writing for accessibility on a web project I've been working on. The code works on both Firefox 3.6 and Firefox 4 and on Opera 10 but not on other browsers.

It is working by a simple request of all CSS link elements on the page (there are only 2) and disabling one and enabling another amongst other things:

function switch_styles() { 	
var css = document.getElementsByTagName('link'); 	
var link = document.getElementById('switcher'); 
if (style == '' || style == 'main') { 		
css[1].disabled = false; 
style = 'highcontrast'; 	
link.innerHTML = 'regular contrast version';     
h1size = 27;
lisize = 22;
divsize = 16;
titlesize = 30;
datesize = 15; 
commentsize = 18; 
reset_fonts(); 
css[0].disabled = true; 	
} 	
else if (style == 'highcontrast') {
css[0].disabled = false; 
style = 'main';
link.innerHTML = 'high contrast version';
h1size = 18;
lisize = 15;
divsize = 11;
titlesize = 20;
datesize = 10; 
commentsize = 12; 
reset_fonts(); 
css[1].disabled = true; 	
} 
}

I have another variable outside which stores style. Initially
it is equal to '' but as the high contrast button is clicked
'highcontrast' is placed in the style variable. Then 'main' is
placed in it as it is toggled back.

HTML is here:

<div id='accessibility'>
	<span class='bigger'><a href='#' onclick='bigger();'> A+</a></span>
	<span class='smaller'><a href='#' onclick='smaller();'>a-</a></span> &nbsp; &nbsp; 
	[B]<a id='switcher' href='#' onclick='switch_styles();'>high contrast version</a>[/B]
</div>

DonkeyStyle \o/

It might be overkill, but when I get tired of trying to sort out a browser compatibility issue with JS, I bring in JQuery. They seem to have worked around the issues quite well.