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

2025-10-14 10:42:41

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的背景颜色

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢