jquery如何实现点击按钮切换背景色 _华硕S14

在写前端页面时，会遇到点击按钮切换背景色的需求，今天给大家介绍下jquery如何实现点击按钮切换背景色

文章插图

需要这些哦
华硕S14
window10家庭版
代码编纂器（本文用的HBuilderX）
html
css
jquery
方式/
1在编纂器内新建一个stduy.html ，用来进修今天的内容

文章插图

2在页面头部引入jquery,然后在body标签内加上一个div标签和一个按钮

文章插图

3在style标签内给div加上样式

文章插图

4在script标签内加上点击按钮切换布景色的代码

文章插图

5在浏览器里打开stduy.html ，发现点击按钮可以切换布景色

文章插图

文章插图

6最后贴一下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery若何实现点击按钮切换布景色</title>
<script src="/images/defaultpic.gif"></script>
</head>
<style>
div{
width: 200px;
height: 200px;
}
</style>
<body>
<div></div>
<button>点击切换颜色</button>
</body>
<script>
var color =['red','green','black','white']
var index = 0
$("button").click(function(){
if(index>color.length-1)index = 0
$("div").css('background',color[index])
index++
})
【jquery如何实现点击按钮切换背景色】 </script>
</html>

6
注重事项index是动态增添的
给个赞呗~

以上内容就是jquery如何实现点击按钮切换背景色的内容啦，希望对你有所帮助哦！