Cannot read property ‘style‘ of null 问题

原创已于 2024-12-06 11:14:59 修改 · 置顶 · 4.7w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2019-02-18 15:41:32 首次发布

本文探讨了JavaScript在页面加载过程中遇到的常见问题，包括JS加载时机不当导致的元素属性获取失败，以及由拼写错误或对象为空引起的JS错误。通过实例分析，帮助开发者理解JS与HTML同步的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.主要原因是因为页面还没加载完成就开始获取元素的属性,导致获取属性失败

而这类问题有很多情况

常见的一种是获取html标签的JS写在了加载页面JS的上面，导致获取标签的JS加载完毕而html元素尚未加载，从而找不到目标

我的问题是，获取标签的JS虽然写在html下面。但是在弹窗的时候重复调用获取基本信息页面。导致JS报错

2.是不是书写的问题比如像document.getElementById("a").style 写错为 document.getElementById("ɑ").style等

3.你调用属性的object是空的，看看是不是没有找到你想要的对象，可能你调用的对象调用错了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Eg0

关注关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

报错Cannot read property delayMs of null；【Bug已解决-鸿蒙应用开发】

一键难忘的博客

12-15

1574

报错Cannot read property delayMs of null；【Bug已解决-鸿蒙应用开发】应用开发时报错： >Cannot read property delayMs of null；分析一下是什么错误原因导致的？下文详细描述相关问题： >应用开发时，写 UI 测试用例时报错：Cannot read property delayMs of null；排除代码错误的原因，还会是什么原因造成的？

TypeError: Cannot read property ‘unitCount‘ of null报错

Girasol_YRR的博客

04-21

2031

TypeError: Cannot read property ‘unitCount’ of null报错一、错误如下图：二、解决思路原因：页面首次加载时，会请求一次数据库。此时，若数据库中没有数据，会导致这个报错。（注：若数据库中有数据，则不会报错）解决办法：加if条件判断，并将需要的数据赋值为空字符串来解决。原来的代码： loadData(){ http.get('/user-report-template/analysis-setting').done(res => {

1 条评论您还未登录，请先登录后发表或查看评论

关于Cannot read property ‘style‘ of null的问题

lao6_666的博客

04-02

2759

关于解决Cannot read property 'style' of null的问题

Uncaught TypeError: Cannot read property ‘style‘ of null

Y4258的博客

08-04

1388

遇到这个问题原因：浏览器解析代码，在页面还没加载完成就获取那个元素的属性,导致获取属性失败造成这问题的原因： 1.有重复的id，如：操作上：可能把同一文件添加两次，造成数据库存储两次，可能需要筛选一下 2.文件位置颠倒，dom和js文件位置不对 ...

Vue3 （数组push数据报错）解决Cannot read property ‘push‘ of null报错问题

最新发布

蓝胖子的博客

06-04

306

Vue3 （数组push数据报错）解决Cannot read property ‘push‘ of null报错问题

解决Cannot read property 'style' of null中样式问题

weixin_30532837的博客

08-01

2644

浏览器报错：Cannot read property ‘style’ of null

weixin_46274553的博客

02-20

1222

浏览器报错：Cannot read property ‘style’ of null <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #tim{ width: 100px; height: 100px; background: red; margin: 0 auto; } </style> &

Cannot read property ‘style‘ of null解决方法（getElementBy获取元素）

weixin_44541213的博客

06-16

1318

记录一下解决bug的方法 1、通过ID获取（getElementById） var accout= document.getElementById("zsl-logined"); $(function () { accout.style.display="block"; 2、通过name属性（getElementsByName） var accout= document.getElementsByName("zsl-logined");

Cannot read property "style" of null 诱因之一

LingXi__Y的博客

08-14

990

project.json 写注释会导致此类错误

Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx

01-21

然而，在使用compression-webpack-plugin插件时，我们需要注意版本问题，以免出现Cannot read property 'tapPromise' of undefined报错信息。在解决Cannot read property 'tapPromise' of undefined报错信息后，...

leaflet 地图框架扩展；解决框架错误 Cannot read properties of null (reading '-latLngToNewLayerPoint')

05-28

然而，在使用Leaflet框架进行地图开发时，开发者们有时会遇到一些常见的错误，其中一个比较棘手的错误是：TypeError: Cannot read properties of null (reading '_latLngToNewLayerPoint')。该错误提示表明，代码...

vue中集成jsplumb报错`Cannot read property ‘parentNode‘ of null`，且无法渲染连线的问题

m0_54852350的博客

03-09

1529

简介我在项目中使用了typescript+vue+jsplumb作为流程图框架。问题我在容器中使用的是v-for指令渲染。从配置文件中读取流程图的json并且存入this.items变量中通过v-for指令，调用this.item，渲染一系列组件作为流程图的节点。在this.paintFlowchart方法中进行端口Endpoint和连线Connector的添加。代码： mounted(){ this.items = JSON.parse(JSON.stringify(demoGraph

Cannot read property 'style' of null解决办法

Megamind_HL的博客

01-10

1万+

在我们写JSP页面的时候，可能会遇到在某种条件下需要隐藏某些jsp标签，这个时候我们就用了if else来进行判断，这个时候就会出现错误： if(row.pay_amount < 0){ document.getElementById('excelErrorDiv').style.display = 'block'; ...

浏览器报错：Cannot read property 'style' of null

10-14

9933

代码如下,出现这种错误,不是因为浏览器或js代码有问题, 而是因为这段代码放的位置不对. <div id="tsImgSCon"></div> 下面的js应该放在上面的要查询的对象之后才行.因为页面还没加载完成,js当然找不到对象了. document.getElementById("tsImgSCon").style.width=12+...

“js Uncaught TypeError: Cannot read property 'style' of null”——问题解决思路

如斯，如己

09-19

2万+

1. 你调用属性的object是空的，你看看是不是没有找到你想要的对象，可能你调用的对象（对象名写错）调用错了； 2. 有重复的id 3. 在页面还没加载完成就获取那个元素的属性,导致获取属性失败（ window.onload=function(){ ....... }）} ） ...

TypeError: Cannot read property 'style' of null 错误解决

chndata的专栏

06-05

5万+

错误信息如下： JSP代码如下： Warning !! Importing file has some errors as below: ${excelError}

cannot read properties of null(reading appendChild)解决办法

热门推荐

qq_45530512的博客

11-10

13万+

项目场景：本来写的是一个js渲染，但是出了个小问题，cannot read properties of null(reading appendChild)报错。大致意思是：不能读取空的属性。 let data = [ {img:"./img/OIP-C.jfif",id:13,name:'黄焖鸡米饭',订餐电话:13782721148,均价:'均价11元'}, {img:"./img/OIP-C.jfif",id:12,name:'胡辣汤',订餐电话:15188811571,均价:'均价3元

关于js Uncaught TypeError: Cannot read property 'style' of null 问题

Leonidas的博客

07-10

3万+

1.你调用属性的object是空的，你看看是不是没有找到你想要的对象，可能你调用的对象调用错了比如你想用 document.getElementById("text1").style 其实这个控件id是test1，一些拼写错误导致 2.有重复的id 3.在页面还没加载完成就获取那个元素的属性,导致获取属性失败

Uncaught TypeError: Cannot read property 'style' of null at error.html:84

qq_32114025的博客

01-29

2万+

要做一个判断，如果是浏览器读到是捷克语言的话，要显示捷克语文案，否则显示英语文案代码如下 <body> <script> var JsSrc =(navigator.language || navigator.browserLanguage).toLowerCase(); var sbti...

vue中显示Cannot read property toLowerCase of null

09-24

在Vue中，当你尝试访问一个null或undefined的对象的`toLowerCase`方法时，会抛出"Cannot read property 'toLowerCase' of null"这样的错误。这是因为`toLowerCase`是一个对象的方法，如果这个对象尚未被初始化或者值为空，直接调用这个方法就会导致`TypeError`。举个例子，假设你有这样一个数据绑定： ```javascript <template> <p>{{ userMessage.toLowerCase() }}</p> </template> <script> export default { data() { return { userMessage: null, }; }, }; </script> ``` 在这个场景下，如果`userMessage`始终为null，模板试图调用它的`toLowerCase`方法时，就会引发错误，因为`null`对象并没有`toLowerCase`属性。为避免这种错误，你需要在调用之前检查变量是否已经赋值并且非空： ```javascript <template> <p v-if="userMessage">{{ userMessage.toLowerCase() }}</p> </template> <script> export default { data() { return { userMessage: '', }; }, }; </script> ``` 或者在计算属性中处理： ```javascript <template> <p>{{ lowercaseMessage }}</p> </template> <script> export default { computed: { lowercaseMessage() { return this.userMessage ? this.userMessage.toLowerCase() : ''; } }, data() { return { userMessage: '', }; }, }; </script> ``` 这样只有当`userMessage`有值时，才会尝试转换为小写。