To implement a custom CSS hook for gradients (similar to jQuery's hook for opacity), you'll need to create a cssHook.
Check out: http://api.jquery.com/jQuery.cssHooks/
Here is an example code snippet for extracting colors:
(function($){
if ( !$.cssHooks ){
// Display an error message if jQuery version is not compatible
alert("jQuery 1.4.3 or above is required for this plugin to work");
return;
}
div = document.createElement( "div" ),
css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";
div.style.cssText = css;
$.support.linearGradient =
div.style.backgroundImage.indexOf( "-moz-linear-gradient" ) > -1 ? '-moz-linear-gradient' :
(div.style.backgroundImage.indexOf( "-webkit-gradient" ) > -1 ? '-webkit-gradient' :
(div.style.backgroundImage.indexOf( "linear-gradient" ) > -1 ? 'linear-gradient' : false));
if ( $.support.linearGradient)
{
$.cssHooks['linearGradientColors'] = {
get: function(elem){
var currentStyle=$.css(elem, 'backgroundImage'),gradient,colors=[];
gradient=currentStyle.match(/gradient(\(.*\))/g);
if(gradient.length)
{
gradient=gradient[0].replace(/(linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'');
colors= jQuery.grep(gradient.match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''})
}
return colors;
}
};
}
})(jQuery);
This is just a demonstration of working with cssHooks and not intended for production usage. It has been tested in Firefox, Chrome, IE9, and Safari. For the set-function, refer to RickV's provided link.
Usage:
$('selector').css('linearGradientColors')
Return: an array containing the colors