jquery+css实现网页颜色主题变换，只改变已设置好的几种颜色主题？
又遇到颜色主题变化，这次使用了jquery+css，使用了函数传值，而不是之前网站换肤改变link的方法。
首先是设置好颜色主题后，点击改变页面颜色主题。（需要自行导入jquery.js后查看效果）
直接贴代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript" src="js/jquery.js"></script>
</head>
<style>
div section{
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;
}
div section:nth-of-type(1){
background-color: #177cb0;
}
div section:nth-of-type(2){
background-color: #db5a6b;
}
div section:nth-of-type(3){
background-color: #008000;
}
div section:hover{
cursor:pointer;
}
</style>
<body>
<div>
<section onclick="blue()"></section>
<section onclick="red()"></section>
<section onclick="green()"></section>
</div>
<center>
<h2 >颜色主题jquery变换</h2>
<form action="" >
<span>input：</span><input type="text" required><br><br>
<button >确认</button>
</form>
<span ></span>
</center>
<script>
//设置默认颜色主题
$(document).ready(function(){
blue();
});
// 点击单个换色
function blue(){
change("#177cb0");
}
function red(){
change("#db5a6b");
}
function green(){
change("#008000");
}
//设置需要改变颜色的元素及其样式
function change(colo){
$("#calc").css("background-color", colo);
$("h2, span").css("color", colo);
$("input").css("color", colo);
$("input[type=text]").focus(function(){$(this).css("outline", "none")});
$("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});
$("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});
}
</script>
</body>
</html> 下一篇贴即时变化颜色主题（通过input输入颜色值进行改变）的代码。
如有错误，请您指正！
- 上一篇 »用JQUERY实现给当前页面导航一个CSS
- 下一篇 »css颜色模式hsla和rgba
