Question

我正在使用一些旧的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或""。

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>

搜索并替换旧的背景色

2 个答案: