Dakusan's Domain Forum

Main Site Discussion => Posts => Topic started by: Dakusan on September 28, 2009, 05:31:14 am

Title: An easier way to exchange style sheets in HTML
Post by: Dakusan on September 28, 2009, 05:31:14 am
Original post for An easier way to exchange style sheets in HTML can be found at https://www.castledragmire.com/Posts/An_easier_way_to_exchange_style_sheets_in_HTML.
Originally posted on: 07/03/08

I have seen rather complex code out there for style sheet swapping in web browsers through JavaScript, and just found out a much simpler way works.

I could have sworn I tried to do real-time style sheet swapping a very long while back and none of my tests turned out satisfactorily, but a friend was just asking me about it, and I was redoing the tests, and it all worked out perfectly in an incredibly easy fashion in IE 6 & 7 and Firefox 2.5 & 3. All that needs to be done is swap the href of the link object pointing to the external style sheet file.

<link href="OLDSTYLESHEET.css" rel=stylesheet type="text/css" id=MyScriptSheet>
<input type=button onclick="document.getElementById('MyScriptSheet').href='NEWSTYLESHEET.css'">

Adding style sheets by dynamically inserting HTML via JavaScript seemed to work just fine too.

document.body.innerHTML+='<link href="NEWSTYLESHEET.css" rel=stylesheet type="text/css">';