jQuery和颜色计算

Question

目前我的H1标签设置为#8c0000(深红色).

使用jQuery,我想获得H1的颜色,然后根据h1的颜色进行计算,以确定如果我想要几个阴影更暗的新颜色的十六进制值.

这样做的原因是我想通过创建"插入"文本阴影来使用CSS3的新文本阴影属性来创建"浮雕"效果.

我相信,要获得H1元素的颜色,可以使用:

('H1').css('color');

但是,如何计算更暗的阴影呢？

PS - 看到H1颜色将动态设置,我不能只是在固定的文本阴影中进行硬编码,这就是我需要计算的原因......

任何帮助将不胜感激.先感谢您

Answer 1

最简单的方法(不在颜色空间之间转换)将简单地解析$('h1').css('color')R,G和B中每一个的结果和减去一定量.主要问题是jQuery没有规范化这里返回的值,所以我们将我必须做一些解析自己.

getRGB()从jQuery Color Plugin中获取函数,并删除第一个和最后一个完整性检查以节省空间,我们现在可以获得执行此操作所需的RGB值.(如果您正在使用那些,您可能希望保留最后一次检查和大量命名颜色)

剩下的任务是微不足道的 - 只需通过从每个单独的颜色值中减去一定量来构造新颜色,然后再将它们重新连接在一起以形成有效值rgb:

$('h1').css('text-shadow', function(){
    var rgb = getRGB($(this).css('color'));

    for(var i = 0; i < rgb.length; i++){
        rgb[i] = Math.max(0, rgb[i] - 40);
    }

    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    return '0 3px 3px ' + newColor;
});

在这里看一个简单的演示:http://jsfiddle.net/yijiang/pxqkH/4/