How to include multiple color styles with a conditional statement in JavaScript

Question

I'm trying to optimize a script that targets multiple rgb color styles. It looks like this:

var divs = document.querySelectorAll('div[style^="color"]');
[].forEach.call(divs, function(div) {
    if(div.style.color.includes('rgb(215, 218, 220)')){
        div.style.color="rgb(23, 23, 24)";
    }
});

I'd like to do the same thing which is done for target style rgb(215, 218, 220), for 255, 69, 0 and 113, 147, 255. How would that be accomplished most simply and efficiently?

You mean you want to do the same thing which is done for target style rgb(215, 218, 220), also for 255, 69, 0 and 113, 147, 255 them ? — Ashvin777
– Ashvin777, Commented Feb 27, 2019 at 13:15
Yes, I'd like to substitute all three instances of these colors for 23, 23, 24. — Lichtung
– Lichtung, Commented Feb 27, 2019 at 13:17
If you're able to modify the pages where this script applies, you'd better use CSS "Variables" (Custom Properties). If it's more like a Webextension, of course my comment is void :) — FelipeAls
– FelipeAls, Commented Feb 27, 2019 at 13:55
I'm trying to get around Reddit's nonsense class names with a user script. This is the only approach that seems to work, unfortunately. — Lichtung
– Lichtung, Commented Feb 27, 2019 at 18:16

remix23 · Accepted Answer · 2019-02-27 13:19:04Z

3

This is likely to be inefficient as it reads and write dom according to a string match but you could use RegExp.prototype.test instead of String.prototype.includes:

    var divs = document.querySelectorAll('div[style^="color"]');
    var regexp = /rgb\(215, 218, 220\)|rgb\(255, 69, 0\)|rgb\(113, 147, 255\)/;
    [].forEach.call(divs, function(div) {
        if(regexp.test(div.style.color)){
            div.style.color="rgb(23, 23, 24)";
        }
    });

answered Feb 27, 2019 at 13:19

remix23

3,1722 gold badges13 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How to include multiple color styles with a conditional statement in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related