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

未捕获的类型错误：无法读取 null 的属性“样式”

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

代码：

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，直到 n9 才有 id，所以 n10 显然导致了错误。抱歉当时问这个

4

2 回答 2

3

试试这个：

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

它会给你rgb的颜色。

于 2013-05-19T20:25:05.630 回答
1

编辑

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

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

当从网格中单击一个数字时，jsFiddle 将指向错误。

编辑前的回答

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

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

var n1;
window.onload = function(){ 
 n1 = document.getElementById("n1").style["background-color"]; 
};
于 2013-05-19T20:17:55.037 回答