首页 >web前端 >js教程 >javascript如何改变div背景颜色

javascript如何改变div背景颜色

醉折花枝作酒筹
醉折花枝作酒筹原创
2021-06-11 17:18:214968浏览

在javascript中,可以使用style对象属性改变div背景颜色,语法格式为“元素对象.style.background="颜色值"”。Style对象代表一个单独的样式声明,可从应用样式的文档或元素访问Style对象。

javascript如何改变div背景颜色

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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

代码;

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

【推荐学习:javascript高级教程

以上是javascript如何改变div背景颜色的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn