Javascript Find Elements Using CSS Property

Question

I am writing a Greasemonkey script and at some point in the script, I want to change the background colour of every element on the page that currently has one. I know I can get elements from their ID, and change their CSS, like so:

document.getElementById("char").style.backgroundColor = "#FFFFFF";

But is it possible to do this the other way around, which would be much faster than looping through every element on the page to check if it has a background colour and change it?

// use a new background colour instead
document.getElementByCSS("background-color").style.backgroundColor = "#FFFFFF";

I'd like to avoid JQuery.

With inline css you could do `document.querySelectorAll('[style*="background-color"]')` but I cant see any way for computed styles. — Musa, Aug 14 '14 at 01:31
Also note you'd need to look at the [`computedStyle`](http://stackoverflow.com/a/1020560/451969), since `element.style` is not set automatically by pure CSS. — Jared Farrish, Aug 14 '14 at 01:33
@Musa - Technically, that would miss any that were set with the combined `background:` syntax. — Jared Farrish, Aug 14 '14 at 01:34
Unless I am mistaken, isn't querySelectorAll for IE only? I only need it to apply to Firefox and Chrome because it is a Greasemonkey script. — tomysshadow, Aug 14 '14 at 01:36
No. In fact, IE was the last to support either `querySelector()` and `querySelectorAll()`. — Jared Farrish, Aug 14 '14 at 01:37
oh, well in my case, that should probably work, so thanks for your help. — tomysshadow, Aug 14 '14 at 01:44

score 0 · Answer 1 · answered Aug 14 '14 at 01:45

0

As per what Musa said above "With inline css you could do document.querySelectorAll('[style*="background-color"]') but I cant see any way for computed styles." my case involves inline CSS and so it's all good.

answered Aug 14 '14 at 01:45

tomysshadow

870
1
8
23

score 0 · Answer 2 · answered Aug 14 '14 at 02:55

I wouldn't recommend it but you could use this function

function findByCss( prop, val ) {
        var 
        retArr = [],
        allElms = document.getElementsByTagName('*'),
        computed,
        i = 0;
        for ( ; i < allElms.length; i++ ) {
            computed = window.getComputedStyle( allElms[i], null ).getPropertyValue(prop);
            if ( computed.indexOf( val ) >= 0 ) {
                retArr.push( allElms[ i ] );
            }
        }

        return retArr;

    }

It returns an array of elements which computed styles CONTAIN the value of the style property you are looking for, you can change it to be an less tolerant conditional if you would like. On another note all hex color codes get computed as RBG, so you would have to find the RGB value for the hex code before using this function in your case.

Javascript Find Elements Using CSS Property

2 Answers2