网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

如何利用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的背景颜色

© 2026 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com