CSS style switching skills - dynamic replacement of web page color skin

The separation of styles and data brings more than the simplicity of conforming to standards. Since styles are separated from data, the switching of styles becomes a matter of course! But there are too few Chinese tutorials like this on the Internet! Therefore, I have collected some technical materials that have been implemented by Chinese and foreign websites and sorted them out for the reference of netizens.

Start by having CSS files with different content (preferably each file represents a style, or something that needs to be changed). Here are three examples:

The first is a CSS file (red.css) with a red background. The content in the CSS is:
Copy code

body {background-color:red;}

The second is a CSS file (green.css) with a green background. The content in the CSS is:

Copy code

body {background-color:green;}

The third is a CSS file (yellow.css) with a yellow background. The content in the CSS is:

Copy code

body {background-color:yellow;}

Then add these three CSS links to the xthml file

Copy code

<link rel="alternate stylesheet" href=\'#\'" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

In addition to the different titles, there is another difference among the three, that is REL. The first and third are alternate stylesheets only the second is stylesheet. This second one is of course style.

Import another JS file below the link to control this style switch

Copy code

function setActiveStyleSheet(title) {
  var i, a, main;
  if (title) {
  for(i=0; (a = document.getElementsByTagName('link')[i]); 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 i, a;
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
  if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
  }
  return null;
}

Add three toggle buttons where appropriate

Copy code

<a href=\'#\'" :void()" return false;" title="红色样式"></a>
<a href=\'#\'" :void()" return false;" title="绿色样式"></a>
<a href=\'#\'" :void()" return false;" title="黄色样式"></a>
<a href=\'#\'" :void()" return false;" title="没有样式"></a>

Okay, let's try the three switch links! Have you switched styles?

Addendum: JS documentation with memoization

Copy code

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName
("link")[i]); 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 i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); 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;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);

Specifically: http://www.verydemo.com/demo_c104_i20030.html