5

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

It works perfectly, except with CSS3 gradients.

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

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..

Thank you.

Improve this question
4
  • The gradient isn't a colour, it's a background image. Checking the background-color isn't going to tell you anything about the background image. Commented May 8, 2011 at 19:23
  • There is no background image set; this is purely css3. I doubt these gradients are stored as images (or are even possible to store as images). Commented May 8, 2011 at 19:59
  • 1
    There is a background image, the gradient is the background image. That's why your CSS says background: -moz-linear-gradient instead of background-color: -moz-linear-gradient Commented May 8, 2011 at 20:14
  • Here's the CSS spec that covers gradients, have a look at what it's called Commented May 8, 2011 at 20:18

3 Answers 3

Reset to default
2

Like pointed, use CSS Hooks to do it.

You will find a sample with your need here: http://www.webmuse.co.uk/articles/csshooks-in-jquery/.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That's a nice link, but at the bit where it might solve the problem the question is asking it says this: 'get' not really needed as we only want to be able to override setting a style, not really getting
Where the OP said it? Their question is about getting the value.
2

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

See: http://api.jquery.com/jQuery.cssHooks/

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

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.

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

Improve this answer

9 Comments

Don't you still have to write some JavaScript to return the value in the get of the hook?
Yes, of course. If you need something that isn't implemented in jQuery yet, you'll have to write it on your own, and gradient isn't implemented.
The question here is what do you need to write to implement it in jQuery.
The question was "How can I use jQuery" and my answer is "cssHooks", because that's the way how to use jQuery here.
The question is: "Get element CSS3 background-color gradient with JS."
|
-1

You can extract the colours used in the gradient by looking at the background-image property of the element and then extracting the listed colours. Here's an example, it's using the CSS colour matching RegEx from this post. I've just bound the code to the onclick event of the elements with the background:

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

Note that the RegEx is for CSS2 colours, so it won't match any rgba() or hsla() colours but it ought to be possible for you to extend it if necessary.

Improve this answer

5 Comments

What's the jQuery-part here (as requested by the OP)? Retrieving the current style? Also if you ignore it, cssHooks is the method to work with here instead of this solution.
@DrMolle $(this).css('background-color') would be the relevant jQuery. There's no need to do anything with cssHooks because the information required is already available in standard jQuery.
Really, and if somebody ask's for an alert-box with jquery you suggest $(window)[0].alert('an alert with jquery'); . I'm pretty sure that in the end he not only needs to know some color. cssHooks let him extend jquery to his own needs without losing the known usabilty.
@DrMolle Sorry, I should have said $(this).css('background-image') in my previous comment, because the issue is that $(this).css('background-color') isn't returning the information he wants. How would I use cssHooks in this situation? What benefit would it give over returning the information with $(this).css('background-image')? Please update your answer with the code if putting it in a comment is too limiting.
The benefit is simple, I can use it the jQuery-way for getting css-values instead of defining somewhere any functions that break the usual jQuery-workflow. I've updated my post with an example.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.