芒果小站

样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。

首先要具备不同内容的 CSS 文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例：

第一个是背景为红色的 CSS 文件 (red.css) CSS 中的内容为：

body {background-color:red;}

第二个是背景为绿色的 CSS 文件 (green.css) CSS 中的内容为：

body {background-color:green;}

第三个是背景为黄色的 CSS 文件 (yellow.css) CSS中的内容为：

body {background-color:yellow;}

然后在 xthml 文件中加入这三个 CSS 的链接

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

这三个中除了 title 不一样外还有一个地方有所不同，那就是 REL。第一个与第三个都是 alternate stylesheet 只有第二个是 stylesheet。这第二个就是当然样式。

在链接下面再导入一个 JS 文件，用来控制这个样式切换

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;

}

在合适的地方加入三个切换按钮

<a href="javascript :void()" onclick="setActiveStyleSheet('red');
return false;" title="红色样式"></a>

<a href="javascript :void()" onclick="setActiveStyleSheet('green');
return false;" title="绿色样式"></a>

<a href="javascript :void()" onclick="setActiveStyleSheet('yellow');
return false;" title="黄色样式"></a>

<a href="javascript :void()" onclick="setActiveStyleSheet('none');
return false;" title="没有样式"></a>

好了发布试试点那三个切换链接！是不是已经切换了样式？

补遗：带有记忆功能的 JS 文档

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);

转载自 CSS 样式切换 | 毅博客