如何动态改变元素的颜色？

Posted 2023-03-16

【中文标题】如何动态改变元素的颜色？

【英文标题】：How to dynamically change color of element?

【发布时间】：2012-03-30 06:02:10

【问题描述】：

如何使用变量更改元素的颜色？

假设我们有四个字符串（颜色）。我需要给每个类元素一个不同的，1,2,3,4,1,2,3...等等：

function pressLineColors() 

    var a = "#eee",
    b = "#123",
    c = "#fff",
    d = "#ae23e5";

     $('.pressLine').each(function (i) 
         //go througt each of this, and give them colors, so when new elements
        // appear, give them next color. 
     );

第一个元素应该有颜色a、第二个b、第三个c、第四个d和第五个一个，...

【参考方案1】：

使用添加类

http://api.jquery.com/addClass/

或

http://api.jquery.com/css/

【参考方案2】：

function pressLineColors() 

    //setup array of colors and a variable to store the current index
    var colors = ["#eee", "#123", "#fff", "#ae23e5"],
        curr   = 0;

    //loop through each of the selected elements
    $.each($('.pressLine'), function (index, element) 

        //change the color of this element
        $(this).css('color', colors[curr]);

        //increment the current index
        curr++;

        //if the next index is greater than then number of colors then reset to zero
        if (curr == colors.length) 
            curr = 0;
        
    );

这是一个演示：http://jsfiddle.net/SngJK/

更新

您也可以使用 cmets 中的建议来缩短代码：

function pressLineColors() 
    var colors = ["#eee", "#123", "#fff", "#ae23e5"],
        len    = colors.length;
    $.each($('.pressLine'), function (index, element) 
        $(this).css('color', colors[index % len]);
    );

这是一个演示：http://jsfiddle.net/SngJK/2/

更新

您也可以使用.css('color', function ()) 来遍历每个元素，返回您想要制作元素的颜色：

$('.pressLine').css('color', function (index, style) 
    return colors[index % len];
);

这是一个演示：http://jsfiddle.net/SngJK/4/

【讨论】：

@jgauffin 我回滚了，因为你删除了我解释代码的 cmets。 $.each() 的开销也比 .each() 少，所以我喜欢使用它。

只需使用colors[index % colors.length]，就不需要curr、curr++ 或if 块

我想发布一个我不久前制作的 JSPerf 来演示循环的不同开销：jsperf.com/jquery-each-vs-for-loops/7

@Kyle：就是colors[index % colors.length]。 4 % 4 == 0

不要忘记您可以将函数参数传递给许多 jQuery 方法...$('.pressLine').css('color',function(i)return colors[i%colors.length];); ...编辑：看起来您刚刚添加了它。 :)

【参考方案3】：

您需要将您的列表放入一个类似数组的对象中，然后通过索引访问；

function pressLineColors() 

var colors = [ a = "#eee",
b = "#123",
c = "#fff",
d = "#ae23e5"];

 $('.pressLine').each(function (i) 
     //go througt each of this, and give them colors, so when new elements
    // appear, give them next color. 

   $(this).css("color" , colors[i]);
 );

【讨论】：

是的，已编辑，Jasper 和 Kyle 的答案也更好，因为它们允许列表的大小和元素数组的长度

如果元素多于颜色？

【参考方案4】：

function pressLineColors() 
  var a = ["#eee","#123","#fff","#ae23e5"];

  $('.pressLine').each(function (i, ele) 
    $(ele).css("color", a[i % a.length]);
  );

【参考方案5】：

将这些颜色放在一个数组中

function pressLineColors() 

a = new Array();

a[0] = "#eee",
a[1] = "#123",
a[2] = "#fff",
a[3] = "#ae23e5";

var c = 0;
var size = a.length;

 $('.pressLine').each(function (i) 

      this.style.color = a[c];
      c++;
      if(c > size) c = 0;
  );

【参考方案6】：

创建一个变量来跟踪，一个单独的函数将允许您稍后添加元素并保持跟踪

/* colors in indexable array*/
var colors=["#eee", "#123","#fff","#ae23e5"];

var counter=0;
$('.pressLine').each(function () 
         $(this).css('color', colors[nextColorIndex()]);

);

function nextColorIndex()
    var ctr=counter;
         counter=(++counter <colors.length) ? counter++ :0
         return ctr;

【讨论】：

你将计数器增加两次！ counter=(++counter < colors.length) ? counter :0