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')返回字符串文字，表示Functional format中的背景颜色 - 即 rgb（R，G，B），其中 R 是红色值， G 是绿色值， B 是蓝色值。

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

解决方案：

为了获取红色，绿色和蓝色数字的单个值，一个选项是使用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>

修改

问题has been edited陈述“我忘记添加我动态显示具有相同类* .external-event *的多种背景颜色，它似乎只获得第一个的rgb值元素。“

使用jQyery方法.each()迭代包含类 .external-event 的元素。回调可以接受两个parameters：索引以及element（与回调上下文中的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”开头，则 radix 为16（十六进制），并解析字符串的其余部分。

如果输入字符串以“0”开头，则 radix 为八（八进制）或十进制（十进制）。究竟选择哪个基数是依赖于实现的。 ECMAScript 5指定使用10（十进制），但并非所有浏览器都支持此功能。 因此，在使用parseInt 时始终指定基数。

如果输入字符串以任何其他值开头，则基数为10（十进制）。¹

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

parseInt(matches[1], 10)

Answer 2

在Sam Onela's answer的帮助下，我能够弄明白。

这是我做的：

$('.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');
    }

});

根据背景颜色更改颜色

2 个答案:

问题：

解决方案：

修改

关于使用parseInt()

关于使用`parseInt()`