欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决错误:

程序员文章站 2022-06-12 13:46:23
...

       Uncaught TypeError: Cannot set property 'background' of undefined 

      这是一个前端页面开发中常见的bug,自己也不是第一次遇到了。但是由于自己不是经常写前端代码,所以每次重新遇到都要再回忆一下是原因和解决方案,那就记下来以防下次再遇到吧。

bug重现
我的思路比较简单,用js设置html一个标签的颜色,代码段大概长这样:

<div class="header" name="header"><div>HTML5 Web存储示例</div>

设置的颜色长这样:

	var pageColor = localStorage.getItem("color");
    	header.style.backgroundColor = pageColor;

看上去,没有任何的问题,但是页面加载的时候却报错了,错误就在上面这个语句,报错信息是:

changeTheme.html:77 Uncaught TypeError: Cannot set property 'background' of undefined 

解决思路
不常写前端一下子就露怯了,我第一反应竟然是是不是获取ID的方法写的有问题,比如字母大小写拼错之类的问题。然而现实是残酷的,W3C告诉我方法没有任何问题。 
那么既然不是获取属性的方法没问题(其实就不可能是方法名字写错了,不然浏览器会报 is not a function),那肯定是这个dom本身写的有问题。最直观的办法当然就是debug了,bug也比较简单,跟进去就发现了问题。

原因
“var header=document.getElementByName("header");”这里,代码没有获取到Id为“header”的元素,那么就是null,null是没有办法set属性的,所以就会浏览器就会抛出这个错误:

changeTheme.html:77 Uncaught TypeError: Cannot set property 'background' of undefined 

解决办法

将标签里的name="header"变为id="header":

<div class="header" id="header"><div>HTML5 Web存储示例</div>

获取方式变为:var header=document.getElementById("header");就可以解决这个问题了。

 

相关标签: 作者:饶吉盛