Javascript replace a style with another

Question

I have some code that I need to change via javascript because I cannot edit the code myself (it is created by a platform I use for my website)

<tr style="color:#8C4510;background-color:#FFF7E7;">

What I want to do is wherever this appears, replace the colors with other ones, but it needs to be only for these colors and not all <tr> tags.

Example: replace #8C4510 with #CCCCCC

I am aware of getElementsByTagName, but unsure how to target certain styles within that element to find and replace with something else.

Here is what I tried:

var bgcolor = document.querySelectorAll("*[style]");

for (var i=0; i<bgcolor.length; i++) {
var style = bgcolor[i];

if (background-color == '#FF8000') {
    background-color = '#ed5900';

if (background-color == '#E5F2E5') {
    background-color = '#f8f8f8';
}

if (background-color == '#FFF7E7') {
    background-color = '#f8f8f8';

if (background-color == '#855129') {
    background-color = '#8ebe3e';
}

if (background-color == 'orange;') {
    background-color = '#8ebe3e';
}

if (color == '#8C4510') {
    color = '#8ebe3e';
}


}

And

function changeBGAll() {
var bg = document.querySelectorAll("*[style]");
for (var i = 0; i < bg.length; i++) {
    if (bg[i].style.indexOf('FF8000') !== -1) {
        bg[i].style = bg[i].style.replace("FF8000", "ed5009");
    }
  }
}
changeBGAll();

Answer 1

You can do it the next way:

var elements = document.querySelectorAll('*');
var element;
var i, len = elements.length;
for (var i=0; i<len; ++i) {
    element = elements[i];
    if(element.style.cssText.indexOf('color:#8C4510') > -1) {
        element.style.color = '#CCCCCC';
    }
}

or

if(element.style.cssText.indexOf('color: rgb(140, 69, 16)') > -1) {
    element.style.color = '#CCCCCC';
}

But this might be slow for you, so decide well if you're ready to pay that price.

Answer 2

You could use jQuery to do this easily. Then you can use code like this to do what you want with classes:

$('#idOfMyElement').addClass('myClassName');

or

$('#idOfMyElement').removeClass('myClassName'); 

And if you want them to be toggleable:

$('#idOfMyElement').toggleClass('myClassName');

You would need to import the jQuery library in your html to use this. It is of course possible to do this without jQuery, but I've always found it much easier to use jQuery, especially as it's such a pervasive library.

This will also require you to use css classes, which is definitely something you want to be doing to keep your code readable and maintainable.

Answer 3

You can use HTML DOM querySelectorAll() Method together with CSS [attribute*=value] Selector to pick up elements. Then set a new value with ("object").style.attribute = "new value";. The following example had a tr pink and black but the javascript has changed its colors to yellow + red. The first purple/white tr still untouched.

var x = document.querySelectorAll("tr[style*='color:pink']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

var y = document.querySelectorAll("tr[style*='background-color:black']");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "yellow";
}

<table><tr style="color:white;background-color:purple;"><td><h1>text</h1></td></tr></table>

<table><tr style="color:pink;background-color:black;"><td><h1>text</h1></td></tr></table>

Answer 4

In your question you specifically talk about how you would go about finding and replacing colors which are set as inline-styles.

First and foremost, I'll add the mandatory concern about best practises: You should not be using inline styles. If the platform you are using does this, you may want to verify it is on the latest version and actively maintained, as we live in 2016 now and especially 'platforms' should have no say in presentation. It may offer suggestions and (proper) defaults using stylesheets, and even make it hard to override by having high specificity selectors, but inline styles can only be overridden by other inline styles, which is why it is bad practise.

Ok, now we're covered that, I'm aware that you have a problem and need a fix.

As inline styles are set using attributes, we can use the attribute selector to cherry pick the elements we need to look at.

[style*="#8C4510"]

In order to pick the elements matching this, you have a couple of options, such as vanilla javascript:

var elements = document.querySelectorAll('[style*="#8C4510"]'),
    length, i;

for (i = 0, length = elements.length; i < length; ++i) {
    elements[i].style.color = '#ccc';
}

Or, you can use jQuery:

$('[style*="#8C4510"]').css('color', '#ccc');

Now, there are a couple of concerns here, as eventually you will want to evaluate whether or not the color or background-color matches. It would be tempting to look at this approach

if (elements[i].style.color === '#8C4510')

Only to find out that some/all browsers have actually changed that value to another representation of that color (e.g. the rgb(...) variant), which obviously won't match. In such case you would probably be better off getting the raw attribute value and a regular expression

var style = elements[i].getAttribute('style'),
  pattern = /(\b(?:background-)?color):\s*(#[0-9a-f]+)/gi,
  match, prop;

while ((match = pattern.exec(style))) {
  prop = match[1].replace(/-([a-z])/g, function(m, s) {
    return s.toUpperCase();
  });

  if (prop && match[2] === '#8C4510') {
    elements[i].style[prop] = '#ccc';
  }
}

(Being both lazy and not a particular fan of jQuery, I'll skip to demonstrate the jQuery-equivalent of this approach)