目前我使用以下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比较陌生,所以请耐心等待..
谢谢。
答案 0 :(得分:2)
您需要为渐变创建一个cssHook(例如,jQuery具有为 opacity 实现的钩子)。
请参阅: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\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''})
}
return colors;
}
};
}
})(jQuery);
正如我所说,这只是一个如何使用cssHooks的例子,不适合生产用途。在ff,chrome,IE9,safari中为我工作。 如果您按照RickV发布的链接,可以找到一个集合函数。
用法:$('selector').css('linearGradientColors')
返回:颜色为
答案 1 :(得分:2)
与指出一样,使用CSS Hooks来执行此操作。
您可以在此处找到符合您需求的示例:http://www.webmuse.co.uk/articles/csshooks-in-jquery/。
答案 2 :(得分:-1)
您可以通过查看元素的background-image
属性然后提取列出的颜色来提取渐变中使用的颜色。 Here's an example,它正在使用CSS colour matching RegEx from this post。我刚刚将代码绑定到具有背景的元素的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()
颜色匹配,但如果需要,您应该可以对其进行扩展。