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

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

2017-03-27 15:05 579 查看
又遇到颜色主题变化，这次使用了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输入颜色值进行改变）的代码。

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