Javascript 动态切换样色表

crane.ding · 发表于 2013-2-7 17:04:02

现在越来越多的网站都做到可以用户自己选择样色，其原理就是通过用户的选择来切换加载不同的样色表，当然你的页面必须是有比较好的框架、布局等等。下面就以一个比较简单的例子来说明是怎么实现的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" href="orange.css" type="text/css" title="orange" /><script language="javascript" type="text/javascript" src="changecss.js"></script></head><body><div class="div-one"><h1 style="margin:0;">NO. 1</h1></div> <div class="div-two"><h1 style="margin:0;">NO. 2</h1></div><div class="div-three"> <input type="button" value="change color" /></div></body></html>
//changecss.jsfunction changeActiveStyleSheet(){var i,a,href;for(i=0;(a=document.getElementsByTagName('link')[i]);i++)if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')){if(a.href.indexOf('green')!=-1)href = "orange";else if(a.href.indexOf('orange')!=-1)href = "green";elsehref = "orange";a.href = href + ".css";}
@charset "utf-8";/* orange.css */.div-one{float:left;width:200px;height:200px;opacity = 0.7;background:orange;text-align:center;line-height:200px;border:green 1px dashed;filter:Alpha (opacity = 70);}.div-two{float:left;width:200px;height:200px;background:green;text-align:center;line-height:200px;border: orange 1px dashed;}.div-three{float:left;width:200px;height:200px;text-align:center;}.div-three input{margin:45% 0;}
@charset "utf-8";/* green.css */.div-one{float:left;width:200px;height:200px;opacity = 0.7;background:green;text-align:center;line-height:200px;border: orange 1px dashed;filter:Alpha (opacity = 70);}.div-two{float:left;width:200px;height:200px; background:orange;text-align:center;line-height:200px;border:green 1px dashed;}.div-three{float:left;width:200px;height:200px;text-align:center;}.div-three input{margin:45% 0;}

		自动登录	找回密码
密码			立即注册

Javascript 动态切换样色表

浏览过的版块