jquery+css实现网页颜色主题变换(只改变已设置好的几种颜色主题)

时间:2021-09-16 00:29:27

又遇到颜色主题变化,这次使用了jquery+css,使用了函数传值,而不是之前网站换肤改变link的方法。

首先是设置好颜色主题后,点击改变页面颜色主题。(需要自行导入jquery.js后查看效果)

直接贴代码:

<!DOCTYPE html>
<html lang="en">
<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 style="display:inline-block;">颜色主题jquery变换</h2>
<form action="" id="simpleCalc">
<span>input:</span><input type="text" required><br><br>
<button id="calc">确认</button>
</form>
<span id="result"></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输入颜色值进行改变)的代码。

如有错误,请您指正!