javascript - 根据背景颜色更改颜色

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。这就是为什么您的代码示例总是将(文本前景)颜色设置为白色。

解决方案:

为了获得红色、绿色和蓝色数字的单独值，一种选择是使用 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() ，给出以下内容:

If radix is undefined or 0 (or absent), JavaScript assumes the following:

• If the input string begins with "0x" or "0X", radix is 16 (hexadecimal) and the remainder of the string is parsed.
• If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when using parseInt.
• If the input string begins with any other value, the radix is 10 (decimal).¹

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

parseInt(matches[1], 10)