修改样式表时在某些浏览器(如360)下遇到Cannot read property 'style' of undefined错误的解决方案

时间:2022-12-02 08:25:59

自己写的2048游戏,在本地调试一切正常后,上传至服务器,Chrome效果正常,但发现JavaScript在360浏览器中出错,提示Uncaught TypeError: Cannot read property 'style' of undefined

错误定位如下图

修改样式表时在某些浏览器(如360)下遇到Cannot read property 'style' of undefined错误的解决方案

这段代码是在页面加载后动态修改CSS样式表的属性。

看到这个错误,蒙了很久,为何本地和Chrome下是毫无问题的,360却提示这个错误?最后才发现问题所在。

在控制台显示document.styleSheets[0].cssRules,得到下面的结果

修改样式表时在某些浏览器(如360)下遇到Cannot read property 'style' of undefined错误的解决方案

这个样式表明显不是原来有的,是浏览器强制加载进去的,看样子是用于广告屏蔽,但却影响了我的JS代码。

据此,在获取样式表时,做一个逻辑判断即可解决,代码如下:

var ocssRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
if(ocssRules.length<=1){
ocssRules = document.styleSheets[1].cssRules||document.styleSheets[1].rules;
}