芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
7

CSS 样式切换的实现方法

css
作者 芒果/分类 代码/发布于 2009-09-17 23:43

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

首先要具备不同内容的 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 样式切换 | 毅博客

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-implementation-of-the-style-switch/" title="CSS 样式切换的实现方法" rel="bookmark">CSS 样式切换的实现方法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 7 条群众意见

  1. 万戈 /2009-09-16 06:28

    订阅一更新,我就马上来淘宝了。
    我一直在寻找一个纯 CSS 切换的方法。 回应

    #1
  2. Hobo /2009-09-16 07:59

    好像前两天看过类似的呵呵。 回应

    #2
  3. sleepy /2009-09-16 08:32

    有机会用一下。 回应

    #3
  4. bolo /2009-09-16 18:50

    囧……没有代码高亮。 回应

    #4
  5. Leo.N /2009-09-16 21:59

    这个是好东西。。 回应

    #5
  6. 服装批发 /2009-09-17 11:20

    不错的了!~到时候拿来修改一下就有了。 回应

    #6
  7. ?
    CSS 样式风格换肤切换的实现方法 /2010-09-07 15:56

    […] CSS 样式切换的实现方法 | 芒果 发表评论 | Trackback 2010年9月7日 | 归档于 代码 标签: CSS « […] 回应

    #7

下面我简单说几句