Home Page
  • December 11, 2024, 02:53:55 pm *
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  

News:

Official site launch very soon, hurrah!


Author Topic: An easier way to exchange style sheets in HTML  (Read 14153 times)

Dakusan

  • Programmer Person
  • Administrator
  • Hero Member
  • *****
  • Posts: 551
    • View Profile
    • Dakusan's Domain
An easier way to exchange style sheets in HTML
« on: September 28, 2009, 05:31:14 am »


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">';
Logged