Question

我希望获得背景颜色并将其放入body，例如我的背景与课程FirstColor中一样：

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

现在我希望获得课程#ECAA63中背景的颜色#E36D0A和.FirstColor，并将其替换为body中的颜色

body如下：

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

将班级.FirstColor替换为body为：

＃ECAA63 - 相反 - ＆gt; #CEEEEE
＃E36D0A - 相反 - ＆gt; ＃98BFF1

我试图获得背景颜色ac：http://jsfiddle.net/rKQwu/但是无法完成。

Answer 1

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

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

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

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

中

根据您的最新小提琴，查看http://jsfiddle.net/alnitak/xG4SW/。

Answer 2

首先，为什么不直接切换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版本似乎对我有用。

Jquery获得背景渐变颜色

2 个答案: