Switch themes using document.className

**JohnL** · 03-08-2015, 08:14 AM

I am currently switching themes with css "title". See: http://12phillipstreet.com/button.html I would like to switch themes using document.className. Any suggestions?

**Beverleyh** · 03-08-2015, 03:57 PM

Your question is unclear.

What is it exactly that you would like help with?

If you want to reference the <html> element, document.className should be document.documentElement.className

**JohnL** · 03-08-2015, 10:38 PM

Originally Posted by Beverleyh

Your question is unclear.

What is it exactly that you would like help with?

If you want to reference the <html> element, document.className should be document.documentElement.className

"Thanks for your quick response Beverly. I will try to clarify my problem for you.
Currently my site has 23 pages each using a large"common" style sheet plus "3 optional theme-colour" style sheets. The theme-colour options are switched using the traditional alternative "title" Eg. <link href="css/black.css" rel="alternate stylesheet" type="text/css" title="black" /> and maintained globally with Javascript and cookies. This all works very well.

My problem: In order to reduce the number of server requests, I have combined the three small theme-colour styles within the common CSS. The themes are now switched with Eg. <button class="black" type="submit" onclick="document.body.className = 'tb';">.</button> . This also works well except that the theme change is not global and does not hold on refresh.
I think my problem is really a Javascript/cookie problem. Unfortunately my knowledge of Javascript is very limited so I'm hoping some kind person can provide me with a suitable script to make it work globally and solve my problem.
See: html://12phillipstreet/button.html & html://12phillipstreet/accessibility.html

Thanks in advance jl"

**vwphillips** · 03-09-2015, 10:37 AM

remove the body onload statement and associated code

change the HTML to

Code:

<div class=button-new>Themes:
<button class=white type=submit onclick="CSS('tw',1);">.
</button>
<button class=khaki type=submit onclick="CSS('tk',1);">.
</button>
<button class=black type=submit onclick="CSS('tb',1);">.
</button>
</div>

insert this code just before the </BODY> tag

Code:

<script type="text/javascript">
/*<![CDATA[*/

function CSS(c,d){
  if (c){
   document.body.className=c;
   document.cookie='css='+c+(typeof(d)=='number'?';expires='+(new Date(new Date().getTime()+d*86400000).toGMTString())+';path/;':';');
  }
}

function cookie(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
}

CSS(cookie('css'),1);
/*]]>*/
</script>

function CSS parameters are:
the first function parameter is the class name,
the second parameter(in red) refers to the number od days to restor the CSS else it is the browser session