未捕获的类型错误：无法读取 null 的属性'style'

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

Uncaught TypeError: Cannot read property 'style' of 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>

EDIT:我发现问题了。问题是在id n10，只有id到n9，所以n10显然会导致错误。不好意思问这个

试试这个:

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

它会给你rgb的颜色

edit

所以，我的第一个假设是正确的。在您编辑的代码中，显然没有包含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"]; 
};

相关内容

最新更新

热门标签：

未捕获的类型错误： 无法读取 null 的属性'style'

相关内容

最新更新

热门标签：

未捕获的类型错误：无法读取 null 的属性'style'