獲取元素CSS3背景色漸變與JS

Question

在我用下面的JS（jQuery的）的那一刻找到的背景顏色（如RGB）其他幾個的div：

$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

你需要爲梯度創建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\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return jQuery.trim(s)!=''}) 
      } 
      return colors; 
     } 
    }; 
} 
})(jQuery); 

正如我說，這只是一個例子，如何用cssHooks，並不是爲生產使用工作。適用於ff，chrome，IE9，safari。 如果您按照RickV發佈的鏈接，可以找到設置功能。

用法：$('selector').css('linearGradientColors')
返回：與顏色

Answer 2

像指出一個數組，使用CSS Hooks做到這一點。

你會在這裏找到一個你需要的樣品：http://www.webmuse.co.uk/articles/csshooks-in-jquery/。

Answer 3

通過查看元素的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]); 
    } 
}); 

注意，正則表達式是對CSS2的顏色，所以它不會匹配任何rgba()或hsla()的顏色，但它應該是如有必要，可以延長。