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

 时间:2026-02-14 13:12:59

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如何制作装订线
  • 热门搜索
    沉默是金是什么意思 春风拂面的意思 三十万左右买什么车好 独白的意思 account是什么意思 artist是什么意思 结婚十周年祝福语 故事的意思 黑处有什么 486是什么意思