Interesting - Changing link/style sheet href more than once?

Very basic style sheet switcher only works first iteration in all browsers,

[JAB Creations]

I threw together a very basic style sheet switcher that basically just scans for style sheets and replaces the href attribute's value; the base element's href attribute's value is used in conjunction hence the split.

For some reason this only works the first time, no errors or warnings from any of the browsers are given on the second or later iteration, it simply does not work. I've also noticed that changing the link element's title attribute's value disables styling altogether. Thoughts please?

- John

//usage
change_theme('classic');

function change_theme(t)
{
 var l = document.getElementsByTagName('link');
 var le = l.length - 1;

 for (var i = 0; i <= le; i++)
 {
 if (l[i].rel=='stylesheet')
 {
 if (l[i].title==theme)
 {
 var b = unescape(l[i].href).split(unescape(document.getElementsByTagName('base')[0].href));
 l[i].href = b[1].replace(theme,t);
 }
 }
 }
 theme = t;
}

[penders]

Your function argument is t, but you are using theme in your code (which is presumably undefined, unless it is defined globally somewhere?) so will only work when the title attribute is also undefined?

You do, however, assign t to theme - but at the end of your function?

[JAB Creations]

theme is a global variable (assigned by a PHP session variable). The arguement (l[ i ].title==theme) is checking for the theme to change and then at the end I update the global variable (in order for that to be repeated).

- John

[JAB Creations]

I decided to try a moderation of the first attempt; I essentially create a replacement link element, enable it and delete the previous link element. The key thing to make this work was to set .disabled = false. I tried using that line in the first iteration of the function I posted earlier and it had no effect.

The great thing about this script is that it will retain all the (X)HTML (even the whitespace!) so you don't have to worry about people on slower connections downloading alternative styles, the slightly extra bandwidth of having those link elements on the page, etc. This works beautiful on my site and I plan on replacing the current PHP/redirect implementation. :)

- John

function change_theme2(t)
{
 var l = document.getElementsByTagName('link');
 var le = l.length - 1;

 for (var i = 0; i <= le; i++)
 {
 if (l[i].rel=='stylesheet')
 {
 if (l[i].title==theme)
 {
 var b = unescape(l[i].href).split(unescape(document.getElementsByTagName('base')[0].href));
 b = b[1].replace(theme,t);
 
 var n = document.createElement('link');
 n.setAttribute('href',b);
 n.setAttribute('media','screen');
 n.setAttribute('rel','stylesheet');
 n.setAttribute('title',t);
 n.setAttribute('type','text/css');

 l[i].parentNode.insertBefore(n,l[i].nextSibling);
 document.getElementsByTagName('head')[0].removeChild(document.getElementsByTagName('link')[i]);
 l[i].disabled = false;
 }
 }
 }
 theme = t;
}