Home » Default » 简单3步:实现网站CSS样式快速切换

一. 在网页的HEAD区域加入下列代码:

二. styleswitcher.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);

或者[url=http://www.alistapart.com/d/alternate/styleswitcher.js]点此下载styleswitcher.js[/url]

三. 在网页的BODY相关位置加入下列代码:

切换到风格1切换到风格2

一旦用户点击网页CSS样式切换按钮,他的计算机上保存了一个 cookie, 他在下一次访问您的 web 站点时会保留它所选择的网页样式。同样,如果他从备用样式切换至默认样式,cookie同样 将保存与加载的默认样式表。

[size=10]来源: http://www.inetsolution.com/turnleft/post/CSS-Style-Switcher-A-quick-and-dirty-how-to.aspx[/size]

标签: none

添加新评论

V