将Javascript对象转换为dom元素

Aad*_*rma 2 javascript dom

我很久以前就有这种困惑.在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>
Run Code Online (Sandbox Code Playgroud)

当我做警报时(a型); 它给出了对象.那么,一般来说,我如何改变元素的属性?

zzz*_*Bov 5

问题是#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";
  }
};
Run Code Online (Sandbox Code Playgroud)