如何利用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的背景颜色
  • 如何编辑资源分配网络流程图
  • 如何打开Word的大纲视图
  • Word怎么隐藏段落标记?
  • Word2016怎样删除文档中的所有域?
  • word2016装订线怎么设置 Word如何制作装订线
  • 热门搜索
    我爱文学的手抄报 以读书为主题的手抄报 七十周年手抄报 三四年级中秋节手抄报 家庭文明公约手抄报 关于古诗词的手抄报 感恩父母手抄报简单 小手牵大手手抄报 五水共治手抄报图画 孝敬父母手抄报内容