开发者

convert Javascript object to dom element

开发者 https://www.devze.com 2023-03-25 12:07 出处:网络
I\'ve had this confusion since long. There is an error called cannot read property of null on chrome inspector.

I've had this confusion since long. There is an error called cannot read property of null on chrome inspector.

Upon searchin开发者_如何学编程g and reading, i found that a property (eg style) can be applied to a DOM element, but if it is rendered as a javascript object it gives the above error.

So how do i go about this?

<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>

When i did alert(typeof a); it gives as object. So how do I, in general, change properties of elements ??


The issue is that #test doesn't exist when the script is executed. The script is executed immediately as the page is loaded, and at the point when the browser executes the script, it hasn't gotten to <div id="text"></div>, so document.getElementById('test') returns null.

null values don't have properties, so calling: a.style.background... causes JavaScript to error out. If you'd attached this script to body.onload, the callback function provided would execute after the rest of the page was loaded:

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";
  }
};


Your javascript is running before the page has finished loading.

You need to put your javascript inside an window.onload like this:

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


You need to wait for the DOM to be completely loaded before calling that script, because when you are calling the code the element isn't created yet.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消