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>
<title>切换主题</title>
<meta name="author" content="Kong.Yee" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />


<style type="text/css">
#oDiv{
width: 200px;
height: 200px;
background: blue;
border: 2px ridge aqua;
}
#para{
width: 100px;
height: 100px;
background: yellow;
display: block;
}
body{
width: 600px;
}
body.redStyle{
border: 2px solid red;
}
body.redStyle * {
color: red;
}
body.blueStyle{
border: 2px solid blue;
}
body.blueStyle * {
color: blue;
}
</style>
<script type="text/javascript">
<!--
window.οnlοad=function(){
var oDiv=document.getElementById("oDiv");
//alert("Stop");
//document.body.className="blueStyle";
var toggleRed=document.getElementById("toggleRed");
var toggleBlue=document.getElementById("toggleBlue");
toggleRed.οnclick=function(){
document.body.className="redStyle";
}
toggleBlue.οnclick=function(){
document.body.className="blueStyle";
}
}
//-->
</script>
</head>
<body class="redStyle">
<h1>样式:</h1>
<a href="#" id="toggleRed">切换到红色主题</a>
<a href="#" id="toggleBlue">切换到红色主题</a>
<div id="oDiv" class="base">oDiv

</div>
</body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值