如何用JS隐藏color与background-color相同的td？无id/class可用getElementsByTagName吗？

当然可以用getElementsByTagName方法完成这个需求！我来给你详细说下实现思路和代码：

• 第一步：获取所有元素
  用document.getElementsByTagName('td')就能拿到页面上所有的元素，它会返回一个HTMLCollection类型的集合，我们可以通过循环遍历每一个元素。

• 第二步：比较文字颜色与背景颜色
  对于每个，我们需要获取它最终渲染的文字颜色和背景颜色。这里推荐用window.getComputedStyle()方法，它能拿到元素实际显示的样式值（不管样式是内联、内嵌还是外部CSS来的），避免因为颜色格式不一致（比如颜色名、十六进制、RGB）导致判断出错。

• 第三步：隐藏符合条件的元素
  如果文字颜色和背景颜色的取值完全相同，就把这个的display设置为none，这样它就会被隐藏且不占据页面空间；如果你希望它保留位置只是不可见，可以用visibility: hidden。

完整代码示例 #

// 获取页面中所有<td>元素
const allTdElements = document.getElementsByTagName('td');

// 遍历每个<td>进行判断
for (let i = 0; i < allTdElements.length; i++) {
  const currentTd = allTdElements[i];
  // 获取计算后的文字颜色和背景颜色
  const textColor = window.getComputedStyle(currentTd).color;
  const bgColor = window.getComputedStyle(currentTd).backgroundColor;
  
  // 颜色相同则隐藏元素
  if (textColor === bgColor) {
    currentTd.style.display = 'none';
  }
}

补充说明 #

如果你的样式都是内联设置的（就像你给出的例子那样），直接用currentTd.style.color和currentTd.style.backgroundColor也能拿到对应值，但getComputedStyle的兼容性和通用性更强，适合更多场景。

内容的提问来源于stack exchange，提问作者Umang Mehra