变暗的十六进制颜色不起作用

时间:2017-01-20 08:17:49

标签: javascript jquery html css colors

我有一个小代码,您可以选择自己喜欢的颜色来“个性化”网站......它会改变背景颜色和标题颜色(可能更晚一些),但是它会将背景更改为与标题,所以标题是不可见的...我有一点点javascript来减轻/变暗十六进制颜色,但这似乎不起作用。 http://codepen.io/tobiasglaus/pen/RKKdqy 我试着用课堂上的每个标题变暗.title。

使用代码

$('.title').css('color', color);
$('body').css('background', color);

我改变了标题和背景颜色(我的功能被称为'颜色',所以最后是','颜色'。 使用$('.title').css.color = lightenDarkenColor(color, -20);我试图使标题颜色变暗,但那里似乎有一个错误。

1 个答案:

答案 0 :(得分:1)

我不知道你是否解决了问题喷气机,但你可以在这里查看一个有效的版本:Codepen

这是我添加的方法,而不是你的lightenDarkenColor()

 //@param  {string} rgb     "rgb(26,26,26)""
 //@param  {string} type    "darken" or "lighten"
 //@param  {int} percent
 //@return {string}         returns the altered RGB color 

function alterColor(rgb, type, percent) {
  rgb = rgb.replace('rgb(', '').replace(')', '').split(',');

  var red = $.trim(rgb[0]);
  var green = $.trim(rgb[1]);
  var blue = $.trim(rgb[2]);

  //If rgb is black set it to gray
  if (red == 0 && green == 0 && blue == 0) {
    red = 100;
    green = 100;
    blue = 100;
  }

  if (type === "darken") {
    red = parseInt(red * (100 - percent) / 100, 10);
    green = parseInt(green * (100 - percent) / 100, 10);
    blue = parseInt(blue * (100 - percent) / 100, 10);
  } else {
    red = parseInt(red * (100 + percent) / 100, 10);
    green = parseInt(green * (100 + percent) / 100, 10);
    blue = parseInt(blue * (100 + percent) / 100, 10);
  }

  rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

  return rgb;
}