获取与JS元素CSS3背景色渐变 [英] Get element CSS3 background-color gradient with JS

问题描述

目前我用下面的JS（jQuery的）来查找背景颜色（如RGB）其他几个的div的时刻：

At the moment I use the following JS (jQuery) to find the background color (as rgb) of several other divs:

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

它完美，除了与CSS3渐变。

It works perfectly, except with CSS3 gradients.

作为一个例子，我有以下的CSS使一个div的背景类似于一个便利贴注意：

As an example, I have the following css to make the background of a div look similar to a post-it note:

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 doesn't seem to pick up anything.

我如何使用jQuery找到在CSS3渐变中使用的颜色的至少一个？
我是比较新的JS，所以请多多包涵。

How can I use jQuery to find at least one of the colors used in a css3 gradient? I am relatively new to JS, so please bear with me..

感谢您。

推荐答案

您需要创建的渐变的（jQuery的已例如实施了的透明度）。

You'll need to create an cssHook for gradient (jQuery has for example an hook implemented for opacity).

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

作为请求了一个示例 - code检索的颜色：

As requested an example-code for retrieving the colors:

(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，铬，IE9，Safari浏览器为我工作。
如果你遵循发表RickV链接一套功能都可以找到。

As I said it's just an example how to work with cssHooks, not meant for production usage. Works for me in ff, chrome, IE9, safari. A set-function can be found if you follow the link posted by RickV.

用法： $（'选择'）的CSS（'linearGradientColors'）结果
返回：用颜色数组

Usage: $('selector').css('linearGradientColors')
Return: an array with the colors

这篇关于获取与JS元素CSS3背景色渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！