手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何利用js实现点击input改变div的背景颜色

时间:2024-10-13 09:47:33

1、鼠标点击打开HBuilder软件,如图所示:

如何利用js实现点击input改变div的背景颜色

2、点击暂不登录,如图所示:

如何利用js实现点击input改变div的背景颜色

3、点击文件菜单新建一个Web项目,如图所示:

如何利用js实现点击input改变div的背景颜色

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>如图所示:

如何利用js实现点击input改变div的背景颜色

5、然后点击运行菜单-->浏览器运行,如图所示:

如何利用js实现点击input改变div的背景颜色

6、运行之后的可以看到浏览器的Div是红色的,如图所示:

如何利用js实现点击input改变div的背景颜色

7、鼠标点击DIV之后,变成了黄色,如图所示:

如何利用js实现点击input改变div的背景颜色
© 手抄报圈