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

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

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

除了CSS3渐变之外，它工作得非常好

例如，我使用以下css使div的背景看起来类似于post-it便笺：

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比较陌生，所以请容忍我

---

谢谢。

您需要为gradient创建一个csshake（例如jQuery为不透明性实现了一个钩子）

见：

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

(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);

正如我所说的，这只是一个如何使用csshook的示例，而不是用于生产。在ff、chrome、IE9和safari中为我工作。 如果您遵循RickV发布的链接，则可以找到set函数

用法：

$（'selector'）.css（'lineArgRadientColor'）

Return：一个具有类似于指针的颜色的数组，用于执行此操作

---

您可以在此处找到您需要的示例：。

您可以通过查看元素的

背景图像

属性，然后提取列出的颜色来提取渐变中使用的颜色，它正在使用。我刚刚将代码绑定到背景元素的

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]);
    }
});

$（“div”）.bind（“单击”，函数（）{
window.alert（'Background-color:'+（$（this.css（'Background-color'））；
（0-9A-A-FAA-f{3，6}）b）；（A）；（A）；（黑色）；（黑色）；（黑色）；（黑色）；（黑色）；（黑色）；（蓝色）；（蓝色）；（紫）蓝（蓝色）；（蓝色）；（蓝色）；（蓝色）；（紫）蓝）；（蓝色）蓝）色（色）的（色）以及（色）分）的（色））；（；（；（；（；（；（124；（灰色）（灰色）；（灰色）；（灰色）；（灰色）；（灰色）；（灰色）；（灰色）；（灰色）；（124；（绿色）（绿色）；（绿色）第124；（灰色）；（绿色）第124；（绿色）（灰色）；（灰色）；（绿色）第124；（绿色）；（绿色）第124；（绿色）；（绿色）；（绿色）第124；（灰色）；（青）；（青）；（青）；（青））（青））（青）（青）（青）（石灰））））））[0-9][0-9][0-9]| 2[0-4][0-9]| 25[0-5]）\b\s*，\s*\b（[0-9][1-9][0-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%\124100%）+\s*，\s*（\d？\d%\124100%）+\s*，\s*（\d？\d%\124; 100%）+\s*）/g；
var colors=（$（this.css（'background-image'））.match（re）；
对于（变量i=0；i

---

请注意，正则表达式用于CSS2颜色，因此它不会匹配任何

rgba（）

或

hsla（）

颜色，但如果需要，您应该可以扩展它。

渐变不是颜色，而是背景图像。检查

背景颜色

不会告诉您任何关于背景图像的信息。没有背景图像集；这纯粹是css3。我怀疑这些渐变是否存储为图像（甚至可以存储为图像）有一个背景图像，渐变就是背景图像。这就是为什么你的CSS说

background:-moz-linear-gradient

而不是

background-color:-moz-linear-gradient

，看看它叫什么。你不是还需要写一些JavaScript来返回钩子的

get

中的值吗？是的，当然se.如果您需要一些尚未在jQuery中实现的内容，您必须自己编写，而gradient尚未实现。这里的问题是，您需要编写什么来在jQuery中实现它。问题是“如何使用jQuery”，我的答案是“cssHooks”，因为这是使用jQuery的方式。问题是：“使用JS获取元素CSS3背景色渐变。“这是一个很好的链接，但在它可能解决问题的地方，问题是问它这样说：

“get”并不是真正需要的，因为我们只希望能够覆盖设置样式，而不是真正得到OP所说的

？他们的问题是关于得到值。这里的jQuery部分是什么（按照OP的要求）？检索当前样式？如果忽略它，cssHooks是此处使用的方法，而不是此解决方案。@DrMolle

$（this.css（'background-color'））

将是相关的jQuery。无需对

cssHooks

执行任何操作，因为标准jQuery中已经提供了所需的信息。真的，如果有人要求提供带有jQuery的警报框，您建议

$（窗口）[0]。警报（“带有jQuery的警报”）

。我很确定，最终他不仅需要知道一些颜色。cssHooks让他在不失去已知用途的情况下扩展jquery到自己的需要。@DrMolle抱歉，我应该在我之前的评论中说

$（this.css（'background-image'）

，因为问题是

$（this.css（'background-color'））

没有返回他想要的信息。在这种情况下，我如何使用

cssHooks

呢？使用

$（this.css（'background-image'）返回信息有什么好处

？如果将答案放在注释中太过有限，请用代码更新答案。好处很简单，我可以用jQuery的方式获取css值，而不是定义任何打破通常jQuery工作流的函数。我用一个例子更新了我的帖子。