为什么我的 function 给我“这不是红色的”？

Question

So I'm trying to see if a cell has a red background, when I put test in the inputbox
and click the button, I receive the message "this is not red". Could someone please
explain to me how I could make it say "this is red"?

 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

By default node.style wont give you computed styles. You have to use window.getComputedStyle(element) to check computed styles.

So following code should work

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");
  }
}

Answer 2

Use getComputedStyle() to get the actual style used at runtime. The style property of the element will only give you information on the inline style of the element.

 var colors = ["rgb(255, 0, 0)"]; function testfunction() { var location = document.getElementById("userinput").value; var style = getComputedStyle(document.getElementById(location)); if (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>