使用js实现换肤功能

最新推荐文章于 2024-09-23 12:03:20 发布

weixin_30794499

最新推荐文章于 2024-09-23 12:03:20 发布

阅读量195

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/helloczh/articles/1590506.html

版权

Skin.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>网页焕肤</title>

<style type="text/css">

#main

{

width:800px;

height:600px;

margin:auto;

font-family:"新宋体";

font-size:15px;

}

#top

{

width:800px;

height:30px;

border:1px #666666 solid;

border-bottom:1px #333333 dotted;

}

#bottom

{

width:800px;

height:669px;

border-top:0px;

border:1px #666666 solid;

}

#btRed,#btGreen,#btBlue

{

width:30px;

height:15px;

border:1px #999999 solid;

}

#btRed

{

background-color:#FF0000;

}

#btGreen

{

background-color:#00FF00;

}

#btBlue

{

background-color:#0000FF;

}

span

{

margin-right:2px;

float:right;

}

</style>

<link id="cssStyle" type="text/css" rel="stylesheet" href=""/>

<script type="text/javascript">

function init()

{

/*当第一次加载网页的时候，随机产生一个样式表使用*/

var skinArray=["red","green","blue"];

var index=Math.floor(Math.random()*skinArray.length);

var cssName=skinArray[index];

//document.getElementById("cssStyle").href=cssName+".css";

document.styleSheets[1].href=cssName+".css";

}

function changeSkin(cssName)

{

//document.getElementById("cssStyle").href=cssName+".css";

document.styleSheets[1].href=cssName+".css";

}

</script>

</head>

<body οnlοad="init()">

<div id="main">

<div id="top">

<span>红色<input type="button" id="btRed" οnclick="changeSkin('red')"/></span>
　　 <span>绿色<input type="button" id="btGreen" οnclick="changeSkin('green')"/></span><span>蓝色<input type="button" id="btBlue" οnclick="changeSkin('blue')" /> </span>
　　 <span>网页换肤:</span>

</div>

<div id="bottom">

</div>

</div>

</body>

</html>

Blue.css

#bottom

{

background-color:#0000FF;

}

Green.css

#bottom

{

background-color:#00FF00;

}

本案例的要点为，同时为页面准备多个皮肤(css)，当首次加载页面的时候随机添加一个皮肤，然后当点击对应的皮肤的时候加载对应的样式。同时<link rel="stylesheet" type="text/css" href=""/>中href=""不可缺少。

转载于:https://www.cnblogs.com/helloczh/articles/1590506.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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