XHTML+CSS布局可调用JS实现实时样式风格替换

分类:Xhtml+Css　|　发布者:Tim　|　发布日期: 2007-12-28　|　天气:不指定　 大 | 中 | 小
如果大家常常泡论坛的话，估计也知道现在这些论坛（不论是 Discuz!或者是PHPWind等等）都支持在论坛底部有一个选择风格的列表菜单链接！
如果你的网站页面是以层叠样式表来定义网页的样式风格的话
又制作了多个层叠样式表（css）就可以用以下的方法来增加你的网站的风格可选性
这样的话浏览者就可以根据自己心情来更换论坛的风格！
下面就是要教大家怎样实现这样的功能！一共有四步。

首先是JavaScript文件：
replaceStyle.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);


其次是在网页（head标签中）中调用你已经为你的网页定义好样式风格的CSS文件（假如有3个css）

style1.css
style2.css
style3.css

<link rel="stylesheet" rev="stylesheet" href="style1.css" type="text/css" /> <!--第一个样式风格，也是用户打开默认的风格-->
<link rel="stylesheet" rev="stylesheet" href="style2.css" type="text/css" title="style2" /> <!--第二个-->
<link rel="stylesheet" rev="stylesheet" href="style3.css" type="text/css" title="style3" /> <!--第三个-->


再次是在网页（head标签中）中调用上面写好的Script文件

<script type="text/javascript" src="replaceStyle.js"></script>


最后让浏览者在页面中实现选择风格（body标签中）

<a href="#" onclick="setActiveStyleSheet('',1); return false;">风格1</a>
<a href="#" onclick="setActiveStyleSheet('style2',1); return false;">风格2</a>
<a href="#" onclick="setActiveStyleSheet('style3',1); return false;">风格3</a>



以上就是XHTML+CSS布局可调用JS实现替换样式风格
文章出处:　　本文为Azuresky Blog原创,转载请注明"作者"和"出处"及本声明！
阅读(8910)
评论(2)
引用(0)
Tags: , , , ,

bei
2008-3-24 16:40
请问如何实现一个站点下的分类目录使用不同的风格呢，比如站点localhost上的导航：../A目录打开为红色风格，../B目录打开为绿色风格。。。? 如果可以实现请wubeiuu@qq.com,有酬谢！
Tim 回复于 2008-3-26 11:21
这个很简单啊。
你“不同目录的页面”引入不同的CSS文件不就行了？
例如“根目录”下有：
red文件夹放红色风格css；
green目录下放绿色风格css。

那么A目录下的页面文件CSS引入就是在head标签中写入以下：
<link rel="stylesheet" rev="stylesheet" href="../red/style.css" type="text/css" />

B目录目录下的页面文件CSS引入就是在head标签中写入以下：
<link rel="stylesheet" rev="stylesheet" href="../green/style.css" type="text/css" />
小英
2008-1-10 17:50
好强大啊
分页： 1/1 第一页 1 最后页