javascript如何改变div背景颜色

文章2022-09-07118 人已阅来源：网络

在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背景颜色的详细内容！

相关内容

  • css中margin的4个属性顺序

    在CSS中，margin 属性的四个值可以按照以下两种方式来指定：按照顺时针方向依次指定上、右、下、左四个方向的外边距值。例如：margin:10px20px15px5px;/...

  • css中padding四个值的顺序

    当你使用padding属性来设置元素的内边距时，可以按照以下两种方式来指定四个值：按照顺时针方向依次指定上、右、下、左四个方向的内边距值。例如：padding:10px20px...

  • 微信手机弹幕/手持弹幕怎么弄

    有很多朋友问：手机弹幕怎么弄？在这里给大家分享一下，手机弹幕一般是小程序制作的，不用麻烦的再去下载APP。在这里给大家说一下，手机弹幕和手持弹幕其实是说的一个东西，只是叫法不同...

    微信手机弹幕/手持弹幕怎么弄
  • JS中函数(function)的定义以及几种用法

    在JavaScript中，函数（function）是一种可重复使用的代码块，用于执行特定的任务。函数可以接受参数（也称为形式参数），执行一系列的操作，并返回一个值。以下是定义函...

  • js中function函数的用法

    ...

  • js find()方法的用法与详解

    find() 方法是JavaScript数组对象的一个方法，用于查找数组中满足指定条件的第一个元素，并返回该元素。find() 方法的语法如下：array.find(funct...

  • js中split()方法的用法与详解

    split() 方法是JavaScript字符串对象的一个方法，用于将字符串拆分成一个字符串数组，基于指定的分隔符将字符串分割成多个子字符串。split() 方法的语法如下：s...

  • CSS linear-gradient() 函数 详解

    linear-gradient() 函数是CSS中用于创建线性渐变背景的函数。它可以在两个或多个颜色之间创建平滑过渡的效果。linear-gradient() 函数的语法如下：...

  • js splice方法详解

    splice() 是JavaScript数组对象的一个方法，用于修改数组的内容。它可以实现删除、插入和替换数组元素的功能。splice() 方法接受三个参数：start：指定删...

  • 帝国cms生成静态出现ecms_news_data_’ doesn’t exist的解决办法

    帝国cms生成静态出现ecms_news_data_'doesn'texist的解决办法Table'******_ecms_news_data_'doesn'texistsel...

浏览更多有关 的内容