linking CSS in JS?

[Z3R0]

ok well I'm not going to lie, I'm still currently building up my JS skills, I have some coding background in other languages, but not really much via internet... Anyways... I've managed to swap styles via cookies + JS, but not with variables... it's been mean. Yes Yes I know, I should just use PHP or ASP, but I haven't gotten that far yet. Any ideas?

[Charles]

What is your question? What exactly are you trying to accomplish?

[Z3R0]

Basically what normally is done with PHP and ASP, swapping css style sheets for the same HTML document.

click here for blue style
click here for red style

changes links, text, and other things via red.css or blue.css depending on which was clicked

Basically I have done this with setting a document cookie, retrieving the cookie and displaying the specified CSS sheet, however, I would rather try and do it without needing 2 types of checks versus browser enables. (eg Cookies enabled + JS Enabled) I would rather it just be strictly JS... until I can figure out php and/or asp I just haven't had the time to yet.

[Charles]

Part one included in the HEAD:// This script is adapted from http://www.alistapart.com/stories/alternate/

function styleSheetExists (title) {
var a, i = 0;
while (a = document.getElementsByTagName('LINK')[i++]) {
if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && a.getAttribute('title') == title) {return true};
}
return false;
}

function setActiveStyleSheet(title) {
if (!styleSheetExists (title)) {return}
var a, i = 0;
while (a = document.getElementsByTagName('LINK')[i++]) {
if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
a.disabled = true;
if(a.getAttribute('title') == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var a, i = 0;
while (a = document.getElementsByTagName('LINK')[i++]) {
if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
};
return null;
}

function getPreferredStyleSheet() {
var a, i = 0;
while (a = document.getElementsByTagName('LINK')[i++]) {
if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('rel').indexOf('alt') == -1 && a.getAttribute('title')) return a.getAttribute('title');
};
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ';expires=' + date.toGMTString();
};
else expires = '';
document.cookie = name + '=' + value + expires + '; path=/';
}

function readCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
};
return null;
}

if (document.getElementsByTagName) {
window.onunload = function(e) {createCookie('style', getActiveStyleSheet(), 365)};
var cookie = readCookie('style');
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
createCookie('style', title, 365);
}Part two, where you want the menu to appear:function getStyleSheetTitles() {
var s = new Object();
var a, i = 0;
while (a = document.getElementsByTagName('LINK')[i++]) {
if(a.getAttribute('rel') && a.getAttribute('rel').indexOf('style') && a.getAttribute('title')) s[a.getAttribute('title')] = 1;
}
var k, a = new Array();
for (k in s) {a.push(k)}
return a;
}

if (document.getElementsByTagName && self.getActiveStyleSheet && cookie) {
a = getStyleSheetTitles().sort();
b = new Array();
for (i=0; i<a.length; i++) {b[i] = ['<a href="#">', a[i], '</a>'].join('')}

if (b.length > 0) document.write('<h6 id="styleswitcher">Site styles: ', b.join(' | '), '</h6>');

for (i = a.length; i > 0; i--) {
document.links[document.links.length-i].onclick = function () {setActiveStyleSheet(this.firstChild.data); return false};
document.links[document.links.length-i].onmouseover = function () {window.status = ['Switch to', this.firstChild.data, 'site style.'].join(' '); return true}
document.links[document.links.length-i].onmouseout = function () {window.status = ''; return true}
}
}Do read http://www.alistapart.com/stories/alternate/ for more details.

[Z3R0]

ya that's all well and good, I've actually done that already with alot simpler of code with CSS swapping with cookies, I was just curious if there was a way to do this without the need for cookies. but thank you for the post, it does help in alot more ways than just this, I'm a visual learner, so I learn alot from examples.