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

最新推荐文章于 2024-08-05 04:49:43 发布

学Java的小李

最新推荐文章于 2024-08-05 04:49:43 发布

阅读量1.9w

点赞数 7

分类专栏： html js css

本文链接：https://blog.csdn.net/qq_40072583/article/details/96480981

版权

html 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

css

14 篇文章 1 订阅

订阅专栏

5 篇文章 1 订阅

订阅专栏

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

效果：

代码；

<!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>