5

我想获取背景颜色并将其放入 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 - 代替 -> #CEEEEE
#E36D0A - 代替 -> #98BFF1

我试图让背景颜色交流：http: //jsfiddle.net/rKQwu/但做不到。

4

2 回答 2

1

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

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

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

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

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

于 2012-12-20T08:51:07.030 回答
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 中），fromRgb是toRgb3 个 rgb 值的数组。一旦提取和修改了您认为合适的值，重建一个新的背景渐变字符串应该是微不足道的。我不太了解这段代码对不同情况的鲁棒性，但对于您给出的示例，它在上述 Chrome 版本上对我来说似乎工作正常。

于 2012-12-20T09:26:31.597 回答