点击div切换颜色；

最新推荐文章于 2024-01-19 17:19:19 发布

原创最新推荐文章于 2024-01-19 17:19:19 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #点击div切换颜色

JS类专栏收录该内容

202 篇文章

订阅专栏

本文介绍了一种使用JavaScript来改变HTML元素背景颜色的方法。通过两种方式实现：一是使用if...else...语句，二是使用三元运算符。这两种方法都能使用户通过点击一个HTML元素（如div）来切换其背景颜色。

html元素：
<div style="width: 100px;height: 100px;background: red;margin: 0 auto;" id="box"></div>
第一种方法：（用if...else...）
function fn(obj){
    obj.onclick = function(){
         if(obj.style.background == "red"){
             obj.style.background = "green";
         }else{
             obj.style.background = "red";
         }
    }
 }
 var oDiv = document.getElementById("box");
 fn(oDiv)第二种方法：（三元运算）
//三元运算
   var oDiv = document.getElementById("box");
   oDiv.onclick = function(){
       oDiv.style.background == "red"?oDiv.style.background = "green":oDiv.style.background = "red";
   }