您的位置：首页 > 其它

（6）实现网页中换肤功能

2014-05-25 00:44 246 查看
思路：

其实换肤换的就是css样式，只需要将link中的href路径改一下即可，首先给link加一个id。写好两个函数，然后分别在按钮中书写onclick事件分别触发两个函数。

需要注意的是：

1、任何标签都可以加id，像link、html都可以加id

2、任何一个标签中的任何一个属性都是可以修改的

css1.css文件：

@charset "utf-8"

body{
	background:black;
}

input{
	width:200px;
	height:100px;
	background:yellow;
}


css2.css文件：

@charset "utf-8"

body{
	background:#CCC;
}

input{
	width:100px;
	height:50px;
	background:red;
}


换肤页面的代码：换肤.html:

<!DOCTYPE HTML>
<!--
	其实换肤换的就是css样式，只需要将link中的href路径改一下即可，首先给link加一个id。
	写好两个函数，然后分别在按钮中书写onclick事件分别触发两个函数。
	
	任何标签都可以加id，像link、html都可以加id
	任何一个标签中的任何一个属性都是可以修改的
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
 
<link id="xuan" rel="stylesheet" type="text/css" href="css2.css">
<script>
	function skin1(){
		var oL=document.getElementById('xuan');
		oL.href="css1.css";
	}
	function skin2(){
		var oL=document.getElementById('xuan');
		oL.href="css2.css";
	}

</script>
</head>
<body>
	<input type="button" value="皮肤1" onclick="skin1()"/>
	<input type="button" value="皮肤2" onclick="skin2()"/>
</body>
</html>


效果图：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航