Javascript заменяет стиль другим

Вы можете сделать это следующим образом:

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';
}

Но это может быть медленным для вас, поэтому хорошо решите, готовы ли вы заплатить такую ​​цену.

Вы можете легко сделать это с помощью jQuery. Затем вы можете использовать такой код, чтобы делать с классами то, что хотите:

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

or

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

И если вы хотите, чтобы их можно было переключать:

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

Вам нужно будет импортировать библиотеку jQuery в свой html, чтобы использовать это. Конечно, это можно сделать и без jQuery, но мне всегда было намного проще использовать jQuery, тем более что это такая распространенная библиотека.

Это также потребует от вас использования классов css, что определенно нужно делать, чтобы ваш код оставался читабельным и удобным в сопровождении.

Вы можете использовать HTML DOM querySelectorAll() Method вместе с CSS [attribute*=value] Selector для выбора элементов. Затем установите новое значение с помощью ("object").style.attribute = "new value";. В следующем примере были tr розовые и черные, но javascript изменил их цвета на желтый + красный. Первый фиолетово-белый tr остался нетронутым.

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>

В своем вопросе вы конкретно говорите о том, как вы будете искать и заменять цвета, которые установлены как встроенные стили.

Прежде всего, я добавлю обязательную заботу о лучших практиках: вы не должны использовать встроенные стили. Если платформа, которую вы используете, делает это, вы можете убедиться, что она находится в последней версии и активно поддерживается, поскольку мы живем в 2016 году, и особенно «платформы» не должны иметь права голоса в презентации. Он может предлагать предложения и (правильные) значения по умолчанию с использованием таблиц стилей и даже затруднять переопределение из-за наличия селекторов с высокой специфичностью, но встроенные стили могут быть переопределены только другими встроенными стилями, поэтому это плохая практика.

Хорошо, теперь мы рассмотрели это, я знаю, что у вас есть проблема и вам нужно ее исправить.

Поскольку встроенные стили задаются с помощью атрибутов, мы можем использовать селектор атрибутов, чтобы выбрать нужные элементы.

[style*="#8C4510"]

Чтобы выбрать элементы, соответствующие этому, у вас есть несколько вариантов, таких как vanilla javascript:

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

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

Или вы можете использовать jQuery:

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

Здесь есть несколько проблем, так как в конечном итоге вы захотите оценить, совпадают ли color или background-color. Было бы заманчиво посмотреть на этот подход

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

Только чтобы узнать, что некоторые/все браузеры на самом деле изменили это значение на другое представление этого цвета (например, вариант rgb(...)), которое, очевидно, не будет совпадать. В таком случае вам, вероятно, будет лучше получить необработанное значение атрибута и регулярное выражение.

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';
  }
}

(Будучи ленивым и не являющимся особым поклонником jQuery, я пропущу демонстрацию jQuery-эквивалента этого подхода)