5

I want get background color and putting it in body, for example my background is as in class FirstColor:

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

Now i want get colors #ECAA63 and #E36D0A of background in class .FirstColor and replace they instead colors in body

body is as:

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

Replace they of class .FirstColor to body as:

#ECAA63 - instead -> #CEEEEE
#E36D0A - instead -> #98BFF1

I tried to get background color ac: http://jsfiddle.net/rKQwu/ But can not done.

Taylor Gomez
  • 320
  • 1
  • 5
  • 22
  • Part of the problem in your jsfiddle is that you have MooTools set as your library, but you're attempting to use a jQuery selection. Switching the library makes it work, and then you're left with the problem of parsing background string. – acjay Dec 20 '12 at 09:04

2 Answers2

1

The CSS background style is a composite of several more-specific background-XXX attributes.

The -webkit-gradient is actually stored in the background-image attribute, and not in background-color as you had in your original code. It's also available, of course, in the compound background value.

You will need to parse that string, as shown in @acjohnson55's answer.

Note that in Chrome at least, the returned string outputs the colours in rgb(r, g, b) syntax and not as a hex string. You need to ensure that the colours you write back are also wrapped in rgb(...).

See http://jsfiddle.net/alnitak/xG4SW/, based on your latest fiddle.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • In his fiddle, he already seems to be using `.css("background-image")`, not `background-color`. – Asad Saeeduddin Dec 20 '12 at 10:27
  • See my update, there is a difference between ‍‍`.FirstColor:-webkit-gradient:linear` with `body:-webkit-gradient:radial`. Demo: http://jsfiddle.net/rKQwu/ – Taylor Gomez Dec 20 '12 at 10:28
  • @TaylorGomez you didn't specify `rgb(...)` when you wrote the colours back out to the CSS - see http://jsfiddle.net/alnitak/xG4SW/ – Alnitak Dec 20 '12 at 10:58
1

First of all, why not just switch the classes of the divs instead of modifying the styles directly?

But if there's a reason you need to do it, then you need to parse the from and to values from the style value. As I said in my comment, your code seems to be fine in your jsfiddle; the problem appears to be that you selected MooTools instead of jQuery for your library, and after I switched that, it worked as expected. I don't know much about the Webkit standard, but on Chrome 23, the hex values are converted to rgb(r, g, b) style triplets, so I wrote a little code to parse those out:

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));
​

After this code (in the jsfiddle here), fromRgb and toRgb are arrays of 3 rgb values. It should be trivial to rebuild a new background gradient string once the values are extracted and modified as you see fit. I don't know enough to know how robust this code is to different cases, but it seems to work fine for me on the above Chrome version for the example you gave.

acjay
  • 34,571
  • 6
  • 57
  • 100
  • I tried with it too instead they, but don't work. see: http://jsfiddle.net/rKQwu/ – Taylor Gomez Dec 20 '12 at 10:17
  • Looks fine to me on Chrome 23, but like I said, I'm no expert in what Webkit standards. Is this not what you're seeing? http://twitpic.com/bo0g5r – acjay Dec 21 '12 at 20:59