网页换肤功能实现-优快云博客

本文介绍了一种通过操作HTML中的link元素来实现网页皮肤更换的方法。利用JavaScript动态添加和移除样式表链接，实现了用户可以自由切换不同颜色主题的功能。

换肤功能
创建Css类，主要是对link元素操作
<link rel="stylesheet" type="text/css" media="all" href="styles/red.css" />
元素标签-link 属性标签-rel、type、media、href

<!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>

运行代码

转载于:https://www.cnblogs.com/kuikui/archive/2012/02/02/2336090.html