换肤功能
创建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;
}
}
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>