使用JS获取元素CSS3背景颜色渐变

目前我使用以下JS（jQuery）来查找其他几个div的背景颜色（如rgb）：

$theColor = $(this).css("background-color"); 

除了CSS3渐变之外，它的效果非常好。

作为一个例子，我有以下css使div的背景看起来类似于便利贴：

 background: #FFFAAD; /* old browsers */ background: -moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); /* webkit */ background: gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFAAD', endColorstr='#FFF47D',GradientType=0 ); /* ie */ 

jQuery似乎没有任何东西。

如何使用jQuery查找css3渐变中使用的至少一种颜色？ 我对JS比较新，所以请耐心等待..

谢谢。

Answer 1

像尖头一样，使用CSS Hooks来做。

您可以在这里找到您需要的样品： http ： //www.webmuse.co.uk/articles/csshooks-in-jquery/ 。

Answer 2

您需要为渐变创建一个cssHook（例如，jQuery具有为不透明度实现的钩子）。

请参阅： http ： //api.jquery.com/jQuery.cssHooks/

根据要求，检索颜色的示例代码：

 (function($){ if ( !$.cssHooks ){ //if not, output an error message 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\([^\)]+\)|#[az\d]*|[az]*)/g),function (s) { return jQuery.trim( s )!=''}) } return colors; } }; } })(jQuery); 

正如我所说，这只是一个如何使用cssHooks的例子，不适合生产使用。 适用于ff，chrome，IE9，safari。 如果您按照RickV发布的链接，可以找到设置function。

用法： $('selector').css('linearGradientColors')
返回：带颜色的数组

Answer 3

您可以通过查看元素的background-image属性然后提取列出的颜色来提取渐变中使用的颜色。 这是一个例子 ，它使用了这篇文章中的CSS颜色匹配RegEx 。 我刚刚将代码绑定到具有背景的元素的onclick事件：

 $("div").bind("click", function() { window.alert('Background color: ' + ($(this).css('background-color'))); var re = /(#([0-9A-Fa-f]{3,6})\b)|(aqua)|(black)|(blue)|(fuchsia)|(gray)|(green)|(lime)|(maroon)|(navy)|(olive)|(orange)|(purple)|(red)|(silver)|(teal)|(white)|(yellow)|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\))/g; var colors = ($(this).css('background-image')).match(re); for (var i=0; i < colors.length; i++) { window.alert('Gradient colour: ' + colors[i]); } }); 

请注意，RegEx适用于CSS2颜色，因此它不匹配任何rgba()或hsla()颜色，但如果需要，您应该可以扩展它。