jquery获取背景渐变颜色

Question

我想获取背景颜色并将其放入body，例如我的背景与FirstColor类中的一样：

.FirstColor{
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECAA63), to(#E36D0A));
}

现在我想在.FirstColor 类中获取背景颜色#ECAA63 和#E36D0A 并将它们替换为body 中的颜色

body 为：

body{
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CEEEEE), to(#98BFF1));
}

将 .FirstColor 类替换为 body 为：

#ECAA63 - 改为 -> #CEEEEE
#E36D0A - 代替 -> #98BFF1

我尝试获取背景颜色 ac:http://jsfiddle.net/rKQwu/ 但无法完成。

Answer 1

首先，为什么不直接切换div的类，而不是直接修改样式呢？

但是如果你需要这样做是有原因的，那么你需要从样式值中解析from 和to 值。正如我在评论中所说，您的代码在您的 jsfiddle 中似乎很好；问题似乎是您为库选择了 MooTools 而不是 jQuery，在我切换它之后，它按预期工作。我对 Webkit 标准了解不多，但是在 Chrome 23 上，十六进制值被转换为 rgb(r, g, b) 样式的三元组，所以我写了一些代码来解析它们：

var bgGrad = $('.FirstColor').css("background");
var parseRgb = (function (rgbStr) { return rgbStr.match(/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/); });
var fromStr = bgGrad.match(/from\((.*)\),/)[1];
var fromRgb = parseRgb(fromStr);

var toStr = bgGrad.match(/to\((.*)\)\)/)[1];
var toRgb = parseRgb(toStr);

alert('From rgb: ' + fromRgb.slice(1,4) + '\nTo rgb: ' + toRgb.slice(1, 4));
​

在这段代码之后（在 jsfiddle here 中），fromRgb 和 toRgb 是 3 个 rgb 值的数组。一旦提取和修改了您认为合适的值，重建一个新的背景渐变字符串应该是微不足道的。我不知道这段代码在不同情况下的鲁棒性如何，但对于您给出的示例，在上述 Chrome 版本上对我来说似乎工作正常。

Answer 2

CSS background 样式是几个更具体的background-XXX 属性的组合。

-webkit-gradient 实际上存储在 background-image 属性中，而不是像您在原始代码中那样存储在 background-color 中。当然，它也可以在复合 background 值中使用。

您需要解析该字符串，如@acjohnson55 的回答所示。

请注意，至少在 Chrome 中，返回的字符串以rgb(r, g, b) 语法输出颜色，而不是十六进制字符串。您需要确保您写回的颜色也包含在rgb(...) 中。

请参阅http://jsfiddle.net/alnitak/xG4SW/，基于您最新的小提琴。