Поиск и замена устаревшего цвета фона - PullRequest
Новая
       44

Поиск и замена устаревшего цвета фона

0 голосов
/ 14 января 2019

Я работаю со старым HTML и CSS ...

Код выглядит примерно так: 

<html>
<head>
<style>
table.highlight {
    BACKGROUND: yellow;
}
</style>
</head>
<table class="highlight"><tr><td>test</td></tr></table>
</html>

Если предположить, что код DOM доступен только для чтения, и единственным исправлением является фрагмент кода, который запускается после загрузки DOM, как можно выследить эти «желтые» цвета и заменить их?

Я пытался искать <table>.style.BACKGROUND, <table>.style.background и <table>.style.backgroundColor, но безрезультатно, цвет правильно отображается в веб-браузере.

Когда я повторяю содержимое <table>.style, желтый нигде не появляется. Есть ли способ получить доступ к этим старым, устаревшим компонентам CSS?

Я могу успешно изменить цвет, установив <table>.style.backgroundColor, но у меня возникают проблемы с поиском yellow для начала. Все попытки прочитать CSS возвращаются пустыми.

Я тестирую в Google Chrome и Firefox. Оба возвращают undefined или "".

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Разве вы не можете просто использовать querySelectorAll, чтобы найти все элементы и затем обработать их?

Если вы добавляете скрипт на страницу и вам нужно дождаться загрузки DOM, добавьте скрипт непосредственно перед </body>. Но это также можно запустить в браузерных консолях. 

const yellow = document.querySelectorAll('table.highlight');

// Example: wait 1s and change the yellow tables to blue
setTimeout(() => yellow.forEach(el => el.style.background = 'blue'), 1000);
table.highlight { background: yellow; }
<table class="highlight"><tr><td>test1</td></tr></table>
<table><tr><td>test2</td></tr></table>
<table class="highlight"><tr><td>test3</td></tr></table>
0 голосов
/ 14 января 2019

вы можете использовать getComputedStyle 

[...document.querySelectorAll('table')].forEach(e => {
  // if the background-color is yellow then change it to red
  if (getComputedStyle(e)['background-color'] === 'rgb(255, 255, 0)') 
    e.style.backgroundColor = 'red'
})
<html>

<head>
  <style>
    table.highlight {
      BACKGROUND: yellow;
    }
    
    table.highlight2 {
      BACKGROUND: green;
    }
  </style>
</head>
<table class="highlight">
  <tr>
    <td>test</td>
  </tr>
</table>
<table class="highlight">
  <tr>
    <td>test</td>
  </tr>
</table>
<table class="highlight2">
  <tr>
    <td>test</td>
  </tr>
</table>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...