控制CSS样式实现网页换肤的JS代码

2010-3-8 杜世伟 JavaScript

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

<body>
<style id="red" disabled="ture">
body {
background-color:#f00;
}
</style>
<style id="blue" disabled="ture">
body {
background-color:#3399FF;
}
</style>
<style id="default">
body {
background-color:#fff;
}
</style>
<style type="text/css">
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;
}
</style>
</head>
<body>
<script>
function switchSkin(skin){
var style = document.getElementById(skin);
var tmp = document.getElementsByTagName('style');
var skinArr = [];
for(var i = 0; i < tmp.length; i++){
if(tmp[i].getAttribute('id')){
skinArr[i] =  tmp[i].getAttribute('id');
document.getElementById(skinArr[i]).disabled = true;
}
}
style.disabled = false;
}
</script>
<input type="button" onclick="switchSkin('red');" value="red" />
<input type="button" onclick="switchSkin('blue');" value="blue" />

</body>
</html>

« 6款JS正则表达式控制输入框JS源码 | 三角函数公式表»
Powered by emlog 沪ICP备2023034538号-1