jQuery：根据内联样式宽度更改css颜色

如果我有这个HTML，我将如何根据宽度更改颜色？

例如，如果宽度介于0和33％之间，则为绿色。 如果是橙色的33％-66％。 如果它是66％-100％红色。

Answer 1

这将是我的解决方案： http ： //jsfiddle.net/jKWFz/

 var oMeter = $('.meter'); var percent = 100 * (oMeter.width() / $('#progress_bar').width()); if (percent < 33) { oMeter.css('background-color', 'green'); } else if (percent > 33 && percent <= 66) { oMeter.css('background-color', 'orange'); } else { oMeter.css('background-color', 'red'); } 

编辑：如果内容是在AJAX中加载的，那么您需要做的就是将上面的代码包装在一个函数中，并在加载内容时调用它。

例如：

更新了JSFiddle： http ： //jsfiddle.net/jKWFz/2/

 function setupMeter() { var oMeter = $('.meter'); var percent = 100 * (oMeter.width() / oMeter.closest('.meter-bg').width()); if (percent < 33) { oMeter.css('background-color', 'green'); } else if (percent > 33 && percent <= 66) { oMeter.css('background-color', 'orange'); } else { oMeter.css('background-color', 'red'); } } // Example when loading from AJAX: $.get("some_content.html", function(data) { $('#container').html(data); setupMeter(); }); 

Answer 2

另一种方法，它允许你有多个数字类：

 var p = 74; // your percentage from someplace var colors = ['one','two','three']; // names of your css classes var chosen = colors[0]; i = 1; while(i < colors.length) { var m = Math.round((i/colors.length) * 100); if(p > m){ chosen = colors[i]; i++; continue; } break; } console.log(chosen) // chosen now contains the array var you want depending on % p