How to check which color has been assigned to a div by jquery random color script

Question

I got this script from here

http://jsfiddle.net/r74j6/6/

function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;
 }

 $(function() {
$(".jump-response").each(function() {
    $(this).css("background-color", get_random_color());
});
});

it assigns a random color. I am applying it all the individual element of the page.... $("div, a, p, img ...etc").each(function() {

Then how can I check which div has which color?

ultimately id like to end up with a very poor man's firebug. ...so if you hover over an element it will tell you what it is.

Thanks for any ideas

Answer 1

You can use:

$(".jump-response").mouseover(function() {
    console.log($(this).css('background-color'));    
});

Updated Fiddle

If you want to get hex value instead of rgb, than you can use a custom function like this:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

then call it using:

$(".jump-response").mouseover(function() {
    console.log(rgb2hex($(this).css('background-color')));    
});

Fiddle Demo

Answer 2

You could add a title attribute that matches the color you've added to each element:

$(".jump-response").each(function() {

    var myColor = get_random_color();

    $(this)
        .css("background-color", myColor)
        .attr('title', 'Color: ' + myColor);

});

Here's a fiddle to demonstrate.