Question

var n1 = document.getElementById("n1").style["background-color"];

未捕获的TypeError：无法读取null 的属性'style'

所以我尝试更改表格单元格的背景颜色，但我明白了。不仅如此，但它说不能读，但它实际上可以写到它（我的意思是我可以用同样的方式改变背景颜色，但我无法读取它的值）。

CODE：

function checkDiagonal() {
    var n1 = document.getElementById("n1").style["background-color"];
    var n2 = document.getElementById("n2").style["background-color"];
    var n3 = document.getElementById("n3").style["background-color"];
    var n4 = document.getElementById("n4").style["background-color"];
    var n5 = document.getElementById("n5").style["background-color"];
    var n6 = document.getElementById("n6").style["background-color"];
    var n7 = document.getElementById("n7").style["background-color"];
    var n8 = document.getElementById("n8").style["background-color"];
    var n9 = document.getElementById("n9").style["background-color"];
    var n10 = document.getElementById("n10").style["background-color"];
    if (n1!=='000000' || n2!=='000000' || n3!=='000000' || n4!=='000000' || n5!=='000000' || n6!=='000000' || n7!=='000000' || n8!=='000000' || n9!=='000000' || n10!=='000000')
    {
        return;
    } else {
        var winner='Nobody';
        if (n1 == n2 && n2 == n3) { winner=n3; }    
        if (n1 == n4 && n4 == n7) { winner=n7; }    
        if (n1 == n5 && n5 == n9) { winner=n9; }    
        if (n2 == n5 && n5 == n8) { winner=n8; }    
        if (n3 == n5 && n5 == n7) { winner=n7; }    
        if (n3 == n6 && n6 == n9) { winner=n9; }    
        if (n4 == n5 && n5 == n6) { winner=n6; }    
        if (n7 == n8 && n8 == n9) { winner=n9; }
        if (winner=='Nobody') {
            document.getElementById("n1").style["background-color"]="FFFFFF";
            document.getElementById("n4").style["background-color"]="FFFFFF";
            document.getElementById("n7").style["background-color"]="FFFFFF";
            document.getElementById("n8").style["background-color"]="FFFFFF";
            document.getElementById("n9").style["background-color"]="FFFFFF";
        }
    }
}
var st = new playerTurnObj(); //Pointless to explain this, it has nothing to do
</script>
</head><body>
<table align="center" border=0>
<tr align="center"><td id="n1" style="background-color:000000" onclick="switchTurnGen(st); mark('n1'); checkDiagonal('n1');"></td><td id="n2" style="background-color:000000" onclick="switchTurnGen(st); mark('n2'); checkDiagonal('n2');"></td><td id="n3" style="background-color:000000" onclick="switchTurnGen(st); mark('n3'); checkDiagonal('n3');"></td></tr>
<tr align="center"><td id="n4" style="background-color:000000" onclick="switchTurnGen(st); mark('n4'); checkDiagonal('n4');"></td><td id="n5" style="background-color:000000" onclick="switchTurnGen(st); mark('n5'); checkDiagonal('n5');"></td><td id="n6" style="background-color:000000" onclick="switchTurnGen(st); mark('n6'); checkDiagonal('n6');"></td></tr>
<tr align="center"><td id="n7" style="background-color:000000" onclick="switchTurnGen(st); mark('n7'); checkDiagonal('n7');"></td><td id="n8" style="background-color:000000" onclick="switchTurnGen(st); mark('n8'); checkDiagonal('n8');"></td><td id="n9" style="background-color:000000" onclick="switchTurnGen(st); mark('n9'); checkDiagonal('n9');"></td></tr>
</table>
</body></html>

编辑：我发现了问题所在。问题是在id n10，只有id到n9，所以n10显然会导致错误。很抱歉问这个

Answer 1

试试这个：

var n1 = window.getComputedStyle(document.getElementById("n1"),null).backgroundColor;

它会给你rgb中的颜色。

Answer 2

修改的

所以，我的第一个假设是正确的。在您编辑的代码中，显然没有id="n10"的元素，但是，您有这行代码

var n10 = document.getElementById("n10").style["background-color"];

当从网格中点击数字时jsFiddle will point to on error。

编辑前的回答

问题是没有id="n1"的元素。请在此处查看错误的再现：jsfiddle demo

您应该定位正确的ID，或者如果在元素存在之前执行此代码，则使用onload

var n1;
window.onload = function(){ 
 n1 = document.getElementById("n1").style["background-color"]; 
};

未捕获的TypeError：无法读取null的属性'style'

2 个答案: