javascript - 为什么我的函数给我 "this is not red"？

Question

所以我试图查看一个单元格是否有红色背景，当我将测试放入输入框
并单击按钮时，我收到消息“这不是红色”。有人可以
向我解释如何让它说“这是红色的”吗？

var colors = ["rgb(255, 0, 0)"];

function testfunction() {
  var location = document.getElementById("userinput").value;
  if (document.getElementById(location).style.backgroundColor == colors[0]) {
    alert("This is red");
  } else {
    alert("This is not red");
  }
}

.red {
  background-color: rgb(255, 0, 0);
}

<table>
  <tr>
    <td id="test" class="red"> a1 </td>
    <td id="test2"> b1 </td>
  </tr>
  <tr>
    <td id="test3"> a2 </td>
    <td id="test4" class="red"> b2 </td>
  </tr>
</table>
<input id="userinput" type="text">

<button id="button" onclick="testfunction()"> Button </button>

Answer 1

默认 node.style 不会给你计算样式。你必须使用 window.getComputedStyle(element)检查计算样式。

所以下面的代码应该可以工作

var colors = ["rgb(255, 0, 0)"];

function testfunction() {
  var location = document.getElementById("userinput").value;
  if (getComputedStyle(document.getElementById(location)).backgroundColor == colors[0]) {
    alert("This is red");
  } else {
    alert("This is not red");
  }
}