Find a div by color

Question

I would like to find a div which has the following color: #ff8533.

Is it possible to find a div by color using Jquery?

If found, is it possible to then retrieve any text contained within it?

Answer 1

This is how you get the color value of an element by it's computed style:

$(selector).css('color');

But, the above would return the RGB value even though the color is set as hex value. Hence, you'd need a function to convert RGB to hex.

So, the bottom line is, filter the div elements to return the one that matches the color specified, store it in a variable, then do whatever with that variable, such as, get the containing text etc. Take a look at the example below.

Only tested on major browsers and IE9+

var matchedDiv = $("div").filter(function() {
    return rgb2hex($(this).css("color")) === "#ff8533"
});

alert (matchedDiv.css('border', '1px solid black').text());

//Credit: http://stackoverflow.com/a/3971432/572827
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?\((\d+),\s*(\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]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color: red;">Demo2</div>
<div class="demo" style="color: #ff8533;">The one I am after</div>
<div style="color: green;">Demo3</div>

Answer 2

Using javascript : you could make a loop where you check all your div, and check the color parameter value with the following code :

var listDivs = document.body.getElementsByTagName("*");
for (i = 0; i<listDivs.length; i++){
    div=listDivs[i];
    if(window.getComputedStyle(div).getPropertyValue('color')=='#ff8533'){
        text = div.textContent; // use innerHTML if you want the HTML
    }
}

Answer 3

There are two ways to find a div by it's color and it depends on how the color is set. If it is set by an attribute like so:

<div bgcolor="red">Hello World</div>

Then you can simply access the attribute of that element in jQuery like so:

$('div[bgcolor="red"]');

When it's defined via css or as a style like:

<div style="background-color: red">Hello World</div>

Then you will need to filter the element you are looking through and find the item of the color you want, for example red would be rgb(255, 0, 0). That would look like:

$('div').filter(function() {
    return $(this).css('background-color') == 'rgb(255, 0, 0)'; // red
});

To find an element by text you simply need to use the :contains() selector.

Here is an example

Answer 4

Using javascript you can find all div tags and check the color attribute

/*
 * this method take element you want to find
 * and color to match
 */
function getElementByColor(element,color)
{
    var elem = document.getElementsByTagName(element);
    var ret = null;
    for(var i=0; i<elem.length; ++i)
    {
        if(elem[i].style.color == color)
        {
            ret = elem[i].innerHTML;
            /*
             * or`enter code here`
             *  ret[txt] = elem[i].textContent;
             */
        }
    }
    
    return ret;
}
window.onload = function()
{
    if(txt = getElementByColor("div","#ff8533"))
    {
        // do something
    }
};