如何利用js实现点击input改变div的背景颜色?
这个需要有css样式和js方法。

方法/步骤
-
1
鼠标点击打开HBuilder软件,如图所示:
-
2
点击暂不登录,如图所示:
-
3
点击文件菜单新建一个Web项目,如图所示:
-
4
在项目中键入如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>如何利用js改变input背景颜色</title>
<style>
div{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
这个是DIV
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];/*通过标签名div组*/
var count=0;/*计数,从0开始,每点击一下加一*/
div.onclick = function () { /*给div绑定点击函数*/
count ++;
/*判断点击的次数,来改变背景颜色*/
if(count % 3==1){
this.style.background="yellow"
}else {
this.style.backgroundColor="bule"
}
}
</script>
如图所示:
-
5
然后点击运行菜单-->浏览器运行,如图所示:
-
6
运行之后的可以看到浏览器的Div是红色的,如图所示:
-
7
鼠标点击DIV之后,变成了黄色,如图所示:
END
文章评论