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

2022年7月6日 23点热度 0人点赞

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

这个需要有css样式和js方法。

工具/原料

  • 电脑
  • HBuilder
  • Google浏览器

方法/步骤

  1. 1

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

  2. 2

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

  3. 3

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

  4. 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>

    如图所示:

  5. 5

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

  6. 6

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

  7. 7

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

    END

注意事项

  • 主要是利用div.onclick单击事件的方法对标签的样式进行改变,还可以改变值等
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部

laozhao

这个人很懒,什么都没留下

文章评论