Question

我很久以来就有这种困惑。在chrome检查器上有一个名为“无法读取null属性”的错误。

在搜索和阅读时，我发现属性（例如样式）可以应用于DOM元素，但如果它被渲染为javascript对象，则会出现上述错误。

那么我该怎么做呢？

<html>
    <head>
        <style>
            #test {background:black;width:30px;height:30px;}
        </style>
        <script>
            var a = document.getElementById('test');
            a.style.background = "#f00";
        </script>
    </head>
    <body>
            <div id="test">
            </div>
</body>
</html>

当我做警报时（a型）;它给出了对象。那么我一般如何改变元素的属性？

Answer 1

问题是脚本执行时#test不存在。在加载页面时立即执行脚本，并且在浏览器执行脚本时，它没有<div id="text"></div>，因此document.getElementById('test')返回null。

null值没有属性，因此调用：a.style.background...会导致JavaScript出错。如果您将此脚本附加到body.onload，则提供的回调函数将在加载页面的其余部分后执行：

document.body.onload = function(){ var a = document.getElementById('test'); if ( a ) //just a check to make sure that `a` was set so that it doesn't error again. { a.style.background = "#f00"; } };

Answer 2

您的javascript在页面加载完毕之前正在运行。

你需要将你的javascript放在window.onload中，如下所示：

window.onload = function()
{
  var a = document.getElementById('test');
  a.style.background = "#f00";
}

Answer 3

在调用该脚本之前，您需要等待DOM完全加载，因为在调用代码时，元素尚未创建。

http://jsfiddle.net/m5Qqs/1/

将Javascript对象转换为dom元素

3 个答案: