将Javascript对象转换为dom元素

我长期以来一直存在这种困惑。在chrome检查器中存在一个称为无法读取null属性的错误。将Javascript对象转换为dom元素

在搜索和阅读时，我发现一个属性（例如风格）可以应用于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>

当我确实提醒（typeof a）;它给出了对象。那么，我通常如何改变元素的属性？

来源

2011-08-03 Aaditi Sharma

我真的不明白你问的是什么...在你的榜样，'了'确实包含DOM元素，你引用的属性的方式是正确的，如果应该工作脚本运行时元素在DOM中。 –

问题是执行脚本时#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"; } };

来源

2011-08-03 18:41:53 zzzzBov

zzzzBov是正确的：http://jsfiddle.net/4crMR/ –

啊。得到它了。谢谢:) –

您的JavaScript运行。

你需要把你的JavaScript中的window.onload里面是这样的：

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

来源

2011-08-03 18:43:30 psynnott

看到它的行动：http://jsfiddle.net/6BqYx/ – psynnott

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

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

来源

2011-08-03 18:44:51

将Javascript对象转换为dom元素

回答

相关问题