Use jQuery to replace this color with that color in CSS every time it appears

Question

Use jQuery to replace this color with that color in CSS every time it appears

I have numerous div elements, some with a background-color: #aaa, others with font color: #aaa, and some with border-color: #aaa. There are also divs with various other colors.

I am looking to update these colors (#aaa) to #ccc throughout the CSS.
While I can change the background color of individual divs, the issue arises from having too many to do manually.

I am attempting to locate a jQuery function that can search for a specific word (in this case #aaa) and replace it with another value (such as #ccc) in the CSS.

The desired code snippet should resemble the following, but my current implementation is incorrect:

$("*").if(backgroundColor == "#aaa"){replace by "#ccc"},
if(color == "#aaa"){replace by "#ccc"}, if(borderColor == "#aaa"){replace by "#ccc"}, etc..

jquery css colors replace

Answer 1

Answer №1

If you need to loop through elements of a specific type and dynamically assign colors, you can follow this example where div elements are targeted:

HTML:

<div id="one">Some text</div>
<div id="two">Some text</div>
<div id="three">Some text</div>
<div id="four">Some text</div>
<div id="change">
    <input type="button" value="Change Colors!" />
</div>

JQuery:

$("#change").click(function () {
    $("div").each(function () {
        var color = $(this).css("color");
        if (color == "rgb(170, 170, 170)") {
            $(this).css("color", "#ccc");
        }
    });
});

NOTE: The JQuery method .css() returns RGB values which may require conversion to HEX programmatically.

CSS:

#one, #two {
    color: #aaa;
}
#three, #four {
    color: green;
}

Check out the JSFiddle for a demo:

http://jsfiddle.net/hQkk3/44/

Answer 2

If you need to loop through elements of a specific type and dynamically assign colors, you can follow this example where div elements are targeted:

HTML:

<div id="one">Some text</div>
<div id="two">Some text</div>
<div id="three">Some text</div>
<div id="four">Some text</div>
<div id="change">
    <input type="button" value="Change Colors!" />
</div>

JQuery:

$("#change").click(function () {
    $("div").each(function () {
        var color = $(this).css("color");
        if (color == "rgb(170, 170, 170)") {
            $(this).css("color", "#ccc");
        }
    });
});

NOTE: The JQuery method .css() returns RGB values which may require conversion to HEX programmatically.

CSS:

#one, #two {
    color: #aaa;
}
#three, #four {
    color: green;
}

Check out the JSFiddle for a demo:

http://jsfiddle.net/hQkk3/44/

Use jQuery to replace this color with that color in CSS every time it appears

Answer №1

Similar questions

Using jQuery's .grep() method on an array will only return the final digit

fewer security personnel leads to a higher success rate

Switching between links while using Vue Router may cause jQuery to become disabled

Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

Locate specific text within the content and apply an underline to it

Creating evenly spaced PHP-generated divs without utilizing flexbox

Sending an identifier to a PHP file using JavaScript

Transferring a variable after a successful jQuery call

Customize the appearance of every other column in an asp gridview

Internet Explorer experiencing off-screen menu loading issue

Position validation in jQuery is crucial for ensuring that form

My images seem to lose control and go completely wild when I try to turn them into hyperlinks

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

What is the most efficient method for including a complete date and time in a URL in asp.net mvc?

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

What is the best way to apply a Javascript function to multiple tags that share a common id?

Placing two images next to each other with accompanying captions

Altering the style of the underline for a hyperlink

The JQuery functionality is failing to execute properly on Internet Explorer