-2

Many elements on my website use the colour: #FFA200, but I'd like to replace it with another colour.

Is there a way with JavaScript (or other language if suited) to swap any reference of the old colour to another?

I know I could just do a search/replace but I'd rather not make any actual changes to the CSS file.

Tushar
  • 85,780
  • 21
  • 159
  • 179
ConduciveMammal
  • 455
  • 7
  • 20
  • Show the code, an example – Tushar Oct 14 '15 at 10:04
  • Is jQuery an option? – Justinas Oct 14 '15 at 10:05
  • 1
    Changing color or CSS property via is not a good practice. Rather what you should do is add/replace CSS classes via JS. And migrating to framework like LESS or SASS really comes in handy for such cases. And please donot use JS for the case you described above. It'll cause lots of problem to any and all developer coming after you – sunitj Oct 14 '15 at 10:09
  • @sunitj Hmm I imagine you may be correct, can I ask why it'll cause problems? Is it the site load speeds or something else? – ConduciveMammal Oct 14 '15 at 10:16
  • @ConduciveMammal: do it properly instead of layering yet another problem over top of it. Find-Replace. Computers are great at that. – Daniel Flint Oct 14 '15 at 10:24
  • Firstly its against the principle of separation of concerns. Secondly if you use JS to style your elements for properties like color etc you'll have to maintain those properties both in CSS and JS code. Imagine someone changing the CSS property and expecting it'll change, but as soon as the page loads it gets replaced, what if that person is familiar with CSS but not JS. Therefore to solve the dilemma you are facing frameworks like LESS and SASS were introduced. – sunitj Oct 14 '15 at 10:27

4 Answers4

0

With jQuery it's so simple:

  $(document).find('*').each(function() {
       if($(this).css('color') == "#ffaabb") {
            var newColor = "#990000";
            $(this).css('color', newColor);
       }
  });

EDIT

As VisioN said in the comments, browsers returns RGB color and not hexadecimal. We can solve like this:

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

  $(document).find('*').each(function() {
       if($(this).css('color') == hexToRgb("#ffaabb")) {
            var newColor = "#990000";
            $(this).css('color', newColor);
       }
  });
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • Not every browser will return `color` value in hexadecimal format. Most probably you'll receive RGB value. – VisioN Oct 14 '15 at 10:08
  • You are talking about a computed value. This example reads the color in CSS selector. If you define with hexadecimal, this is what returns – Marcos Pérez Gude Oct 14 '15 at 10:10
  • Curious. many years ago I use this kind of comparison and it works. Now it returns the computed value. Thank you. – Marcos Pérez Gude Oct 14 '15 at 10:17
  • this script can be improved with a rgbToHex function and reverse. – Marcos Pérez Gude Oct 14 '15 at 10:17
  • Yeah, that's a bit more complicated than simple `:)` – VisioN Oct 14 '15 at 10:18
  • Good **VisioN** xD But it can works if we apply this fine script: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb – Marcos Pérez Gude Oct 14 '15 at 10:19
  • Beware that provided `hexToRgb` function returns an object with channels values, and not the actual `rgb(xx, xx, xx)` string. So you can't compare the result with `color` style value. – VisioN Oct 14 '15 at 10:23
  • I have no time. I put OP in the right way. If someone can improve and try till it works please, edit this answer or put a new answer. If this solves when I came again I remove this answer :) – Marcos Pérez Gude Oct 14 '15 at 10:25
0

You can solve this with jQuery, look at w3schools

Example

$(document).ready(function(){
   $(this).click(function(){
      $(this).css("background-color", "yellow");
   });
});
Mario Kurzweil
  • 490
  • 6
  • 11
0

When a css file is linked into a page, it is referenced as a javascript stylesheet object, and each of the definition in the css file(such as class) is referenced as a rule object(cssrule or others in different browser). You can modify the rule, it will only affect current page, because it is modified in the memory. If you mean that modify the css file, unfortunately, you cannot do it in client.

YonF
  • 641
  • 5
  • 20
0

If possible, you could add a style tag in the head after your link to the css file like this, which would override the css file setting.

<head>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <style>         

        .existing-classname {
           background-color: #ff0000;
        }

    </style>
</head>

Or a second css file

<head>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <link rel='stylesheet' type='text/css' href='css_newcolors.css' />
</head>

Either way, this must be much better than running scripts, as you still need to write a list of elements to which this is to be applied, and what if scripts is temporary disabled ?

Update

As you don't wanna search/replace the existing CSS rules, and to keep the work load at a minimum level, another option would of course be to just add the replacing color rules for the targeted elements in the end of the existing css.

Doing so you don't need to alter anything anywhere, like html head tags or adding script.

Asons
  • 84,923
  • 12
  • 110
  • 165