Replacing specific color code in css with jquery

Question

I want to replace code # 789034 with another code, for example # 456780, where it finds in main.css using jquery

I have a main.css file as shown below:

.common-color { color:#789034; } .new-cls { border-color:#789034; height:300px; } .awesome-one { background-color:#789034; height:200px; width:300px; } 

I want to replace code # 789034 with another code, for example # 456780, where it ever finds in main.css using jquery, for example:

 $(each where code=#789034) { set code: #456780; } 

Answer 1

Here is a solution that I will explain step by step.

First call colorReplace("#789034", "#456780"); . The first value is the target color, and the second is the replacement color.

Inside it is $('*').map(function(i, el) { will select all the tags in the DOM tree. For each element, its getComputedStyle(el) styles array is returned. You can configure the selector for faster processing (for example, $('div').map(function(i, el)) { ).

For all style attributes containing "color" (for example, background-color , -moz-outline-color , etc.), it will check if the color value is equal to your target color. If so, it will be replaced with the target color.

Colors are returned as rgba(0,0,0,0) or rgb(0,0,0) and not as #FFFFFF , therefore, for comparison, a quick conversion from rgb to hex is performed. This uses the internal rgb2hex() function.

I hope this is what you are looking for.

---

 function colorReplace(findHexColor, replaceWith) { // Convert rgb color strings to hex // REF: https://stackoverflow.com/a/3627747/1938889 function rgb2hex(rgb) { if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb; rgb = rgb.match(/^rgb\((\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]); } // Select and run a map function on every tag $('*').map(function(i, el) { // Get the computed styles of each tag var styles = window.getComputedStyle(el); // Go through each computed style and search for "color" Object.keys(styles).reduce(function(acc, k) { var name = styles[k]; var value = styles.getPropertyValue(name); if (value !== null && name.indexOf("color") >= 0) { // Convert the rgb color to hex and compare with the target color if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) { // Replace the color on this found color attribute $(el).css(name, replaceWith); } } }); }); } // Call like this for each color attribute you want to replace colorReplace("#789034", "#456780"); 

 .common-color { color: #789034; } .new-cls { border-color: #789034; border-width: 4px; border-style: solid; } .awesome-one { background-color: #789034; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="common-color">color</div> <div class="new-cls">border-color</div> <div class="awesome-one">background-color</div> 

Answer 2

But this is elementary, dear Watson. Just take all possible style keys, check to see if they contain the word color, and then replace all occurrences of color with a new one using a sophisticated regular expression system.

 // gathers all style "keys" like height, width, color, etc var keys = Object.values(window.getComputedStyle($('html').get(0))); // removes any style keys which are not color related var filteredKeys = keys.filter(function (key){return key.indexOf('color') > -1}); // parses the hex string of the color to be replaced into its R, G, and B parts and stores them in an array var colors = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec("#789034").splice(1,3); // converts these hex strings to decimal and combines them into a "rgb(#, #, #)" formatted color string var rgb = 'rgb(' + colors.map(function (color){return parseInt(color, 16)}).join(', ') + ')'; // go through each element in the page $("*").each(function (index, element) { // go through each color-related style "key" filteredKeys.forEach(function(key) { // if the element value for this key matches the color to be replaced... if ($(element).css(key) == rgb) { // ...replace that color with the replacement color $(element).css(key, "#456780"); } }); }); 

 div { height: 50px; width: 50px; } .common-color { color:#789034; } .new-cls { border-style: solid; border-color:#789034; } .awesome-one { background-color:#789034; height:200px; width:300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="common-color">hello</div> <p class="new-cls">cool</p> <div class="awesome-one"></div> 

EDIT:

Or if you want, here is a simple function to use. Color 1 will be replaced by color 2:

 function replaceColor(color1, color2) { var keys = Object.values(window.getComputedStyle($('html').get(0))); var filteredKeys = keys.filter(function (key){return key.indexOf('color') > -1}); var colors = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(color1).splice(1,3); var rgb = 'rgb(' + colors.map(function (color){return parseInt(color, 16)}).join(', ') + ')'; $("*").each(function (index, element) { filteredKeys.forEach(function(key) { if ($(element).css(key) == rgb) { $(element).css(key, color2); } }); }); } 

Answer 3

You might want to try the following:

Put your stylesheet in a document wrapped with a style tag:

 <style id="myStyles" type="text/css"> /* all your css here */ </style> 

Now you can get all the contents of this with

 var myCss = $("#myStyles").text(); 

Then go and do the replacement magic:

 myCSS = myCSS.replace("#789034", "#456780"); 

And in the last, reliable effort, return it to the DOM:

 $("#myStyles").text(myCss); 

But even if this works, it seems very likely to me that you are bringing the XY problem .

Answer 4

you can consider changing it using jquery.

 $(function() { $('.awesome-one').hover( function(){ $(this).css('background-color', '#789034'); }, function(){ $(this).css('background-color', '#456780'); }); });