根据背景颜色更改颜色

Question

我试图根据背景颜色更改颜色，使文本更具可读性。

在我搜索期间，我发现了这个：

var rgb = $('.external-event').css('background-color');
var c = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000);

//console.log(o);
if (o > 125) {
  $('.external-event').css('color', 'black');
} else {
  $('.external-event').css('color', 'white');
}

$('.external-event').css('background-color', c);

var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);

rgb[0] = r;
rgb[1] = g;
rgb[2] = b;

问题是它只显示白色而不是变成黑色。

我在这做错了什么？

这是一个JSFiddle 。

由于某种原因，这个例子与我的实际开发环境相反，即使黑色背景也保持文本为黑色。

编辑：我忘了添加我动态显示多个背景颜色与相同的类.external-event ，它似乎只获得第一个元素的rgb值。

Answer 1

问题：

.css（'background-color'）返回一个字符串文字，表示功能格式的背景颜色 - 即rgb（R，G，B） ，其中R是红色值， G是绿色值， B是蓝色值。

第一个字符（即rgb[0] ）将是r ，第二个字符将是g等...此外，将字符传递给parseInt（） （即parseInt(rgb[0]) ）会产生NaN 。 因此， NaN > 0将始终评估为false 。 这就是为什么您的代码示例始终将（文本前景）颜色设置为白色的原因 。

解决方案：

为了获得红色，绿色和蓝色数字的单个值，一个选项是使用String.replace（）删除rgb() （）并使用String.split（）将值拆分为数组，如下所示：

var rgbValues = rgb.replace('rgb(','').replace(')','').split(', ');
//rgbValues:  ["0", "0", "0"]

另一种选择是使用正则表达式来匹配它，使用.match（） ，如下例所示。

var rgb = $('.external-event').css('background-color');
var pattern = /rgb\((\d+),\s?(\d+),\s?(\d+)\)/;
//matches will be an array containing the elements:
//0- the group matched i.e. rgb(0, 0, 0)
//1- the r value
//2- the g value
//3- the b value
var matches = rgb.match(pattern);

注意：另请参阅下面有关parseInt（）的部分 。

通过展开下面的代码段来查看演示。

 var rgb = $('.external-event').css('background-color'); //remove the rgb() characters and split into an array var rgbValues = rgb.replace('rgb(','').replace(')','').split(', '); //or use a regular expression var pattern = /rgb\\((\\d+),\\s?(\\d+),\\s?(\\d+)\\)/; var matches = rgb.match(pattern); if (matches.length && matches.length > 3) { var c = 'rgb(' + matches[1] + ',' + matches[2] + ',' + matches[3] + ')'; var o = Math.round(((parseInt(matches[1], 10) * 299) + (parseInt(matches[2], 10) * 587) + (parseInt(matches[3], 10) * 114)) / 1000); console.log('rgb: ', rgb, ' c: ', c, ' o : ', o, ' matches: [' + matches.join(", ")+']', ' rgbValues: [' + rgbValues.join(", ")+']'); if (o > 125) { $('.external-event').css('color', 'black'); } else { $('.external-event').css('color', 'white'); } $('.external-event').css('background-color', c); } 

 .external-event { background-color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="external-event"> <br />external event <br /> </div> 

编辑

这个问题已被编辑为“ 我忘了添加我动态显示多个背景颜色与相同的类* .external-event *，它似乎只获得第一个元素的rgb值。 ”

使用jQyery方法.each()迭代包含类.external-event的元素。 回调可以接受两个参数 ：索引和元素 （在回调的上下文中与this相同）。

var externalEvents = $('.external-event');
    externalEvents.each(function(index, externalEvent) {
        //check background color of externalEvent - 
        //$(this) == $(externalEvent)

通过展开下面的代码段来了解此信息。

 $(function() { //jQuery DOM-loaded callback var externalEvents = $('.external-event'); externalEvents.each(function(index, externalEvent) { var rgb = $(externalEvent).css('background-color'); //remove the rgb() characters and split into an array var rgbValues = rgb.replace('rgb(', '').replace(')', '').split(', '); //or use a regular expression var pattern = /rgb\\((\\d+),\\s?(\\d+),\\s?(\\d+)\\)/; var matches = rgb.match(pattern); if (matches.length && matches.length > 3) { var c = 'rgb(' + matches[1] + ',' + matches[2] + ',' + matches[3] + ')'; var o = Math.round(((parseInt(matches[1], 10) * 299) + (parseInt(matches[2], 10) * 587) + (parseInt(matches[3], 10) * 114)) / 1000); console.log('rgb: ', rgb, ' c: ', c, ' o : ', o, ' matches: [' + matches.join(", ")+']', ' rgbValues: [' + rgbValues.join(", ")+']'); if (o > 125) { $(externalEvent).css('color', 'black'); } else { $(externalEvent).css('color', 'white'); } //This isn't needed // $(externalEvent).css('background-color', c); } }); }); 

 .external-event { background-color: #000; } .external-event.orange { background-color: #fa0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="external-event"> <br />external event <br /> </div> <div class="external-event orange"> <br />external event orange <br /> </div> 

关于使用parseInt()注意事项

在给定以下内容的情况下，将基数（通常为10 ）传递给parseInt（）是一种很好的做法：

如果radix未定义或0（或不存在），则JavaScript假定以下内容：

• 如果输入字符串以“0x”或“0X”开头，则基数为16（十六进制），并解析字符串的其余部分。
• 如果输入字符串以“0”开头，则基数为八（八进制）或10（十进制）。 究竟选择哪个基数是依赖于实现的。 ECMAScript 5指定使用10（十进制），但并非所有浏览器都支持此功能。 因此，在使用parseInt时始终指定基数 。
• 如果输入字符串以任何其他值开头，则基数为10（十进制）。 ¹

所以将10作为基数传递，如下所示：

parseInt(matches[1], 10)

Answer 2

在Sam Onela的回答的帮助下，我能够弄明白。

这是我做的：

$('.external-event').each(function() {

    var rgb = $(this).css('background-color');
    var pattern = /rgb\((\d+),\s?(\d+),\s?(\d+)\)/;
    var matches = rgb.match(pattern);

    var o = Math.round(((parseInt(matches[1]) * 299) + (parseInt(matches[2]) * 587) + (parseInt(matches[3]) * 114)) /1000);

    //console.log(o);
    if(o > 125) {
        $(this).css('color', '#444444');
    }else{
        $(this).css('color', 'white');
    }

});