您的位置：首页 > Web前端 > JavaScript

JavaScript+Css+Html实现网页换皮肤功能

2018-04-04 08:50 781 查看

描述：JavaScript+Css+Html实现网页换皮肤功能
原理：使用不同网页背景保存在不同CSS里面，当点击切换的时候通过JavaScript将原来的样式表改为新的CSS就可以完成换肤功能
代码实现：
1.HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页换肤</title>



<link id="background" rel="stylesheet" href="gray.css">
<script src="script.js"></script>
</head>
<body>


<a href="#" onclick="change('orange')">[橙色地带]</a>
<a href="#" onclick="change('green')">[绿色背景]</a>
<a href="#" onclick="change('gray')">[灰色空间]</a>
</body>
</html> 2.CSS代码（网页背景1）body{
/* 将背景颜色换为灰色 */
background-color: gray;
} 3.CSS代码（网页背景2）
body{
/* 将背景颜色换为绿色 */
background-color: green;
} 4.CSS代码（网页背景3）
body{
/* 将背景颜色换为橙色 */
background-color: orange;
} 4.JavaScript代码function change(type) {
if (type == "orange") {
document.getElementById("background").href = "orange.css";
}
else if (type == "green") {
document.getElementById("background").href = "green.css";
}
else if (type == "gray") {
document.getElementById("background").href = "gray.css";
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航