js 实现简单的点击div改变背景颜色

「爱情、让人受尽委屈。」 2021-12-04 02:11 844阅读 0赞

## 思路：点击div改变背景颜色，是通过判断点击的次数，达到改变背景颜色，主要运用了数的加，累加。 ##

## 效果：![在这里插入图片描述][20190719150157136.png] ##

## 代码； ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现点击div改变背景颜色</title>
        <style>
            div{
                background: red;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    <div></div>
    
    </body>
    <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 if(count % 3==0){
             this.style.background="red"
         }else {
             this.style.backgroundColor="#ff9000"
         }
    
     }
    
    </script>
    </html>

[20190719150157136.png]: /images/20211203/16b7b26d48014534ba8fdfddff718cb3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，844人围观）

还没有评论，来说两句吧...

相关阅读

相关 js随即数字random实现div点击更换背景色

需求：点击按钮随机给盒子换背景色用到的知识点：Math.random Math.round githu地址 [https://github.com/sandra

待我称王封你为后i/ 2023年06月05日 08:08/ 0 赞/ 20 阅读

相关 JS点击文本框改变背景颜色

代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <

╰半夏微凉°/ 2022年12月17日 14:56/ 0 赞/ 270 阅读

相关 jQuery实现点击DIV同时点击CheckBox，并为DIV上背景色

直接上代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8

悠悠/ 2022年07月14日 09:46/ 0 赞/ 205 阅读

相关 JavaScript 实现点击div换颜色

<!DOCTYPE html> <html> <head> <title>Change Color</title> <meta

àì夳堔傛蜴生んèń/ 2022年07月13日 05:47/ 0 赞/ 545 阅读

相关 JavaScript怎么改变div的背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我就是我/ 2022年06月10日 11:27/ 0 赞/ 238 阅读

相关 jquery实现点击按钮变换背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年05月27日 10:20/ 0 赞/ 336 阅读

相关 js 循环点击事件改变背景颜色

老规矩先看效果: ![70][] 这里使用的ul li标签这里就不上代码了很简单下面就是重要部分： ![70 1][] 使用的js获取id下li标签的长度当然你也可使

绝地灬酷狼/ 2022年05月15日 01:08/ 0 赞/ 450 阅读

相关 Js 按键改变背景的颜色

<html> <head> <script type="text/javascript" src="jquery-3.2.1.m

我就是我/ 2022年04月04日 12:54/ 0 赞/ 347 阅读

相关 js点击改变div高度

示例：点击显示更多 <img class="tt" src="jt.png" /> <div class="add keep"> <p>Google

爱被打了一巴掌/ 2022年02月17日 19:09/ 0 赞/ 669 阅读

相关 js 实现简单的点击div改变背景颜色

思路：点击div改变背景颜色，是通过判断点击的次数，达到改变背景颜色，主要运用了数的加，累加。效果：![在这里插入图片描述][20190719150157136.pn

「爱情、让人受尽委屈。」/ 2021年12月04日 02:11/ 0 赞/ 845 阅读