换肤功能
创建Css类，主要是对link元素操作
<link rel="stylesheet" type="text/css" media="all" href="styles/red.css" />
元素标签-link 属性标签-rel、type、media、href
var head = document.getElementsByTagName("head")[0];
this.Append = function(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.media = "all";
link.href = url;
if (head) {
head.appendChild(link);
}
else {
document.documentElement.appendChild(link);
}
return link;
}
this.Remove = function (obj) {
if (typeof (obj) == "object" && obj.rel == "stylesheet") {
obj.rel = "NoCss";
if (head) head.removeChild(obj);
else document.documentElement.removeChild(obj);
return true;
}
else {
return false;
}
}
<!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> <title>换网页皮肤功能---link---www.cnblogs.com/kuikui</title> <script type="text/javascript"> // <link rel="stylesheet" type="text/css" media="all" href="styles/red.css" /> // 元素标签-link 属性标签-rel、type、media、href function Css() { var head = document.getElementsByTagName("head")[0]; this.Append = function (url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.media = "all"; link.href = url; if (head) { head.appendChild(link); } else { document.documentElement.appendChild(link); } return link; } this.Remove = function (obj) { if (typeof (obj) == "object" && obj.rel == "stylesheet") { obj.rel = "NoCss"; if (head) head.removeChild(obj); else document.documentElement.removeChild(obj); return true; } else { return false; } } } </script> <link rel="stylesheet" type="text/css" media="all" href="http://files.cnblogs.com/kuikui/red.css" title="red" /> <link rel="alternate stylesheet" type="text/css" media="all" href="http://files.cnblogs.com/kuikui/blue.css" title="blue" /> <link rel="alternate stylesheet" type="text/css" media="all" href="http://files.cnblogs.com/kuikui/green.css" title="green" /> </head> <body> <div> 测试框 </div> <br /> <input type="button" value="红" onclick="test1()" /> <input type="button" value="蓝" onclick="test2()" /> <input type="button" value="绿" onclick="test3()" /> <script type="text/javascript"> var CSS = new Css(); var newCssFile; function test1() { newCssFile = CSS.Append("http://files.cnblogs.com/kuikui/red.css"); } function test2() { newCssFile = CSS.Append("http://files.cnblogs.com/kuikui/blue.css"); } function test3() { newCssFile = CSS.Append("http://files.cnblogs.com/kuikui/green.css"); } </script> </body> </html>
