搜索和替换旧背景颜色

Question

我正在使用一些旧的 HTML 和 CSS...

代码看起来像这样：

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

假设 DOM 代码是只读的，唯一的修复是在 DOM 加载后运行的代码片段，如何寻找这些 "yellow" 颜色并替换它们？

我已经尝试寻找 <table>.style.BACKGROUND、<table>.style.background 和 <table>.style.backgroundColor 但没有成功，但颜色在网络浏览器中显示正确。

当我回显 <table>.style 的内容时，黄色没有出现在任何地方。有没有办法访问这些旧的遗留 CSS 组件？

我可以通过设置 <table>.style.backgroundColor 成功更改颜色，但我无法找到开始的 yellow。所有尝试读取 CSS return 空白。

我正在 Google Chrome 和 Firefox 中进行测试。 return undefined 或 "".

Answer 1

你可以使用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>

Answer 2

难道你不能只使用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>

搜索和替换旧背景颜色

Search and replace legacy background color

html

javascript

css

legacy