CODEWITHSUNDEEP
javascriptjquerycss
Dryadwoods
Dryadwoods

Reputation: 2929

efficient way to look for all css uses of a color

What is the most efficient way to look for all uses of a css color in the "current page" ? For me a use of a color appear as color-background, font color, border color. In table TDs, Divs, Span, paragraph (P), etc....

I think to do a similar "loop" to this one is overkill for a full page, and this one is just searching a specific HTML tag (DIV) and verifying only the "color", not the other properties....

$("div").each(function () {
    var color = $(this).css("color");
    if (color == "#F1F2F3") {
        console.log('found it!');
    }
});

Isn't there a easiest way to simple say: "replace all HEX color #XXXXXX value for #YYYYYY ?????

In css I might even represent the color in different ways (at least 5 ways):

    background-color: #000000;
    color: #000;
    border: 1px solid rgb(0,0,0);
    border-bottom-color: rgb(0%,0%,0%);
    outline-color: black;

Update 1

I took Garath sugestion and I worked a little on it (all selector with exclusion, etc), but I am still not so happy about it..... I am still trying to identify all different properties where the color might exist, and I am not even paying attention to the way the browser will return me the color.....

$('*:not(head, script,link, meta, title)').filter(function() { 
    var replace = 'rgb(0, 0, 0)';
    var replaceFor = '#FF0000';
    if( $(this).css('color') == replace)  $(this).css('color', replaceFor); 
    if( $(this).css('background-color') == replace)  $(this).css('background-color', replaceFor); 
    if( $(this).css('border-color') == replace)  $(this).css('border-color', replaceFor); 
});

It would be so great to have a similar way to this one Attribute Equals Selector [name="value"], but where I would not need to specify the attribute type...

Upvotes: 2

Views: 109

Answers (1)

Piotr Stapp
Piotr Stapp

Reputation: 19828

Instead of each function you can use filter, but still it have to check all elements - fortunately it the complexity of this check is linear. The snippet could look like this:

$('div').filter(function() {
    var match = '#F1F2F3';
    return ( $(this).css('color') == match );
}).css('color', '#YYYYYY');

Upvotes: 3

Related Questions