eh folks.
this is a bit more complicated (for me) than just installing Paul Swoden's (from ALA) styleswitcher.js file.

I have a site that involves multiple stylesheets that do more than just change text size etc...

as you can see, I have managed already to get the job done with PHP.
http://dustin.polvero.com

look at the "Tools" on the left hand navigation. I'd like to do the same thing, but with Javascript.

The styleswitcher downloaded from alistapart only supports single swaps for preferred and custom sheets. In this case, I want the user to be able to change the text, the color, and the contrast ( a 3 x 3 multiplier ) which would be a total of 27 possible combinations.

Also, if anyone could possibly get me in the right direction using standard DOM that will pass validation tests.

Here is my PHP snippet that I created myself if this helps any

PHP Code:
<?php
$self 
$_SERVER['PHP_SELF'];
if ( !
$_COOKIE['settings'] == true )
{
    
setcookie("settings"truetime()+36000);
    
setcookie("size""medium"time()+36000);
    
setcookie("color""green"time()+36000);
    
setcookie("contrast""dark"time()+36000);
    
$_COOKIE['settings'] = true;
    
$_COOKIE['size'] = "medium";
    
$_COOKIE['color'] = "orange";
    
$_COOKIE['contrast'] = "dark";
}
if ( isset(
$_GET['c']) )
{
    
$cur_color $_GET['c'];
    
setcookie("color"$cur_colortime()+36000);
    
$_COOKIE['color'] = $_GET['c'];
}
if ( isset(
$_GET['cn']) )
{
    
$cur_contrast $_GET['cn'];
    
setcookie("contrast"$cur_contrasttime()+36000);
    
$_COOKIE['contrast'] = $_GET['cn'];
}
if ( isset(
$_GET['s']) )
{
    
$cur_size $_GET['s'];
    
setcookie("size"$cur_sizetime()+36000);
    
$_COOKIE['size'] = $_GET['s'];
}
function 
set_color ()
{
    if ( 
$_COOKIE['color'] == "blue" )
    {
    return 
'<link rel="stylesheet" href="dustin-blue.css" type="text/css" />'// custom
    
}
    elseif ( 
$_COOKIE['color'] == "orange" )
    {
    return 
'<link rel="stylesheet" href="dustin-orange.css" type="text/css" />'// custom
    
}
    else
    {
    return 
'<link rel="stylesheet" href="dustin-green.css" type="text/css" />'// preferred
    
}
}
function 
set_contrast ()
{
    if ( 
$_COOKIE['contrast'] == "lightest" )
    {
    return 
'<link rel="stylesheet" href="dustin-t1.css" type="text/css" />'// custom
    
}
    elseif ( 
$_COOKIE['contrast'] == "lighter" )
    {
    return 
'<link rel="stylesheet" href="dustin-t2.css" type="text/css" />'// custom
    
}
    else
    {
    return 
'<link rel="stylesheet" href="dustin-t3.css" type="text/css" />'// preferred
    
}
}
function 
set_size ()
{
    if ( 
$_COOKIE['size'] == "small" )
    {
    return 
'<link rel="stylesheet" href="dustin-ts.css" type="text/css" />'// custom
    
}
    elseif ( 
$_COOKIE['size'] == "large" )
    {
    return 
'<link rel="stylesheet" href="dustin-tl.css" type="text/css" />'// custom
    
}
    else
    {
    return 
'<link rel="stylesheet" href="dustin-tm.css" type="text/css" />'// preferred
    
}
}

?>
in the head

Code:
<head>
<!-- persistent -->
<link rel="stylesheet" type="text/css" href="dustin.css" />

<!-- php custom preferred -->
<?php
echo "\n".
set_color()."\n".
set_contrast()."\n".
set_size();
?>

</head>
and you can view the HTML on the page itself.

In debt to whomever,
Dustin

>> http://dustin.polvero.com