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

原创 于 2022-04-02 16:21:22 发布 · 2.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css3

本文探讨了JavaScript编程中常见的三种错误类型：语法错误、运行时错误和逻辑错误。语法错误包括检查书写和对象调用错误，解决方法是仔细审查代码。运行时错误主要涉及在页面未完全加载时获取元素属性，应确保DOM加载完成后再执行相关操作。理解并避免这些错误能提升JavaScript编程效率和代码质量。

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

通常会有以下几种情况：

1.检查自己的书写问题

2.所调用属性的object是空的，或者说对象的调用错误

3.在页面还未加载完成就获取元素属性，从而获取失败；因为如果js先编译完成，而此时html还没解析完，style就不能被解析。

lao6_666
关注
报错Cannot read property delayMs of null；【Bug已解决-鸿蒙应用开发】
一键难忘的博客
12-15 1577
报错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 2037
TypeError: Cannot read property ‘unitCount’ of null报错 一、错误如下图： 二、解决思路 原因：页面首次加载时，会请求一次数据库。此时，若数据库中没有数据，会导致这个报错。（注：若数据库中有数据，则不会报错） 解决办法：加if条件判断，并将需要的数据赋值为空字符串来解决。 原来的代码： loadData(){ http.get('/user-report-template/analysis-setting').done(res => {
Cannot read property ‘style‘ of null 问题
weixin_41327789的博客
02-18 4万+
1.在页面还没加载完成就获取那个元素的属性,导致获取属性失败 这类问题有很多情况 常见的是调用的或许html标签的js写在了js上面，导致js加载完毕而html元素尚未加载，找不到目标 我的问题是，js虽然写在html下面。但是在弹窗的时候重复调用获取基本信息页面。导致js报错 2.是不是书写的问题 比如想document.getElementById("a").style 写错为 doc...
浏览器报错：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> &
Uncaught TypeError: Cannot read property ‘style‘ of null
Y4258的博客
08-04 1388
遇到这个问题原因：浏览器解析代码，在页面还没加载完成就获取那个元素的属性,导致获取属性失败 造成这问题的原因： 1.有重复的id，如： 操作上：可能把同一文件添加两次，造成数据库存储两次，可能需要筛选一下 2.文件位置颠倒，dom和js文件位置不对 ...
Cannot read property 'style' of null解决办法
Megamind_HL的博客
01-10 1万+
在我们写JSP页面的时候，可能会遇到在某种条件下需要隐藏某些jsp标签，这个时候我们就用了if else来进行判断，这个时候就会出现错误： if(row.pay_amount &lt; 0){ document.getElementById('excelErrorDiv').style.display = 'block'; ...
解决Cannot read property 'style' of null中样式问题
weixin_30532837的博客
08-01 2646
<script type="text/javascript"> function updateTime(){ var timeNow = new Date(); var hour = timeNow.getHours(); var minute = timeNow.getMinutes(...
leaflet 地图框架扩展；解决框架错误 Cannot read properties of null (reading &#39;-latLngToNewLayerPoint&#39;)
最新发布
05-28
然而，在使用Leaflet框架进行地图开发时，开发者们有时会遇到一些常见的错误，其中一个比较棘手的错误是：TypeError: Cannot read properties of null (reading &#39;_latLngToNewLayerPoint&#39;)。该错误提示表明，代码...
vue中集成jsplumb报错`Cannot read property ‘parentNode‘ of null`，且无法渲染连线的问题
m0_54852350的博客
03-09 1530
简介 我在项目中使用了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 诱因之一
LingXi__Y的博客
08-14 991
project.json 写注释会导致此类错误
Cannot read property ‘style‘ of null解决方法（getElementBy获取元素）
weixin_44541213的博客
06-16 1319
记录一下解决bug的方法 1、通过ID获取（getElementById） var accout= document.getElementById("zsl-logined"); $(function () { accout.style.display="block"; 2、通过name属性（getElementsByName） var accout= document.getElementsByName("zsl-logined");
TypeError: Cannot read property 'style' of null 错误解决
热门推荐
chndata的专栏
06-05 5万+
错误信息如下： JSP代码如下： Warning !! Importing file has some errors as below: ${excelError}
浏览器报错：Cannot read property 'style' of null
10-14 9935
代码如下,出现这种错误,不是因为浏览器或js代码有问题, 而是因为这段代码放的位置不对.   &lt;div id="tsImgSCon"&gt;&lt;/div&gt; 下面的js应该放在上面的要查询的对象之后才行.因为页面还没加载完成,js当然找不到对象了.       document.getElementById("tsImgSCon").style.width=12+...
关于js Uncaught TypeError: Cannot read property 'style' of null 问题
Leonidas的博客
07-10 3万+
1.你调用属性的object是空的，你看看是不是没有找到你想要的对象，可能你调用的对象调用错了 比如你想用 document.getElementById("text1").style 其实这个控件id是test1，一些拼写错误导致 2.有重复的id 3.在页面还没加载完成就获取那个元素的属性,导致获取属性失败
“js Uncaught TypeError: Cannot read property 'style' of null”——问题解决思路
如斯，如己
09-19 2万+
 1. 你调用属性的object是空的，你看看是不是没有找到你想要的对象，可能你调用的对象（对象名写错）调用错了；  2. 有重复的id  3. 在页面还没加载完成就获取那个元素的属性,导致获取属性失败（         window.onload=function(){ ....... }）}        ）  ...
Uncaught TypeError: Cannot read property 'style'
chuanping7294的博客
10-19 429
js在浏览器报出如下错误（chrome中）：Uncaught TypeError: Cannot read property 'style' of null 浏览器如果报出如下错误（chrome中）：UncaughtTypeError:Cannotreadproperty'sty...
Uncaught TypeError: Cannot read property 'style' of null at error.html:84
qq_32114025的博客
01-29 2万+
要做一个判断，如果是浏览器读到是捷克语言的话，要显示捷克语文案，否则显示英语文案 代码如下 &lt;body&gt; &lt;script&gt; var JsSrc =(navigator.language || navigator.browserLanguage).toLowerCase(); var sbti...
解决Cannot read property ‘style‘ of null中样式问题
10年职场两茫茫，35岁凄凉奈若何
09-23 1054
解决Cannot read property 'style' of null中样式问题
鸿蒙Error message:Cannot read property icon of null
03-21
<think>嗯，用户遇到了鸿蒙系统中的“Cannot read property &#39;icon&#39; of null”错误，需要帮助解决。首先，我得想这个错误通常是什么原因引起的。根据常见的JavaScript错误，这种错误通常是因为尝试访问一个null或undefined对象的属性。在这里，用户可能是在访问某个对象的icon属性时，该对象不存在，也就是null。 接下来，我需要回忆一下HarmonyOS开发中可能涉及的相关部分。鸿蒙应用开发主要使用ArkTS，类似于TypeScript，所以语法和错误处理应该类似。可能的场景包括资源引用、组件渲染或数据绑定过程中某个对象未正确初始化。 然后，我应该考虑具体的解决步骤。首先，用户需要检查报错位置的具体代码，找到访问icon属性的那一行。可能是在自定义组件、使用资源文件或者动态加载图标时出了问题。例如，可能在渲染时某个变量还未被赋值，导致访问icon属性失败。 然后，分步骤分析可能的解决方案。第一步是检查对象是否存在，比如在访问icon之前，确保对象已经正确初始化。可能需要使用条件判断或者可选链操作符。第二步是检查资源引用是否正确，比如图标资源是否存在于指定的路径，或者在代码中是否正确引用了资源。第三步是检查数据绑定的时机，确保数据在渲染时已经可用，避免异步加载未完成时就进行访问。 另外，还需要考虑组件生命周期的因素。例如，在aboutToAppear或onPageShow等生命周期函数中初始化数据，确保在组件渲染前数据已经准备好。同时，检查是否有可能导致对象为null的异步操作，比如网络请求或文件读取，这时候需要添加加载状态或默认值。 最后，可能需要查看官方文档或社区是否有类似问题的解决方案，确认是否有已知的bug或最佳实践。例如，资源引用的路径是否正确，图标命名是否符合规范，或者是否有特定的API使用要求。 在生成相关问题的时候，要围绕这个错误的常见原因和解决方案展开，比如调试方法、资源管理、生命周期处理等，帮助用户进一步理解和预防类似问题。</think>### 鸿蒙系统"Cannot read property &#39;icon&#39; of null"错误解决方案 #### 1. 定位错误触发点 - **检查调用栈**：在DevEco Studio的Log窗口中查看完整报错信息，确认具体代码行。例如： ```typescript let component = null; console.log(component.icon); // 此处触发错误 ``` - **使用断点调试**：在可疑代码段设置断点，观察对象是否为`null`[^1] #### 2. 常见场景及修复方案 1. **资源引用问题** ```typescript // 错误示例 Image($r(&#39;app.media.unexist_icon&#39;)) // 图标文件不存在时返回null // 正确做法 Image($rawfile(&#39;exist_icon.png&#39;)) // 使用确定存在的资源路径 ``` 验证`resources/base/media/`目录下是否存在对应图标文件[^3] 2. **组件未初始化** ```typescript // 错误示例 @State currentItem: ItemModel = null; build() { Image(this.currentItem.icon) // 未初始化时访问 } // 修复方案 @State currentItem: ItemModel = new ItemModel(); // 初始化默认值 ``` 3. **异步数据加载** ```typescript // 添加加载状态判断 if (this.dataLoaded) { Image(this.asyncData.icon) } else { LoadingIndicator() } ``` #### 3. 防御性编程技巧 - **使用可选链操作符**（TypeScript 3.7+）： ```typescript const iconPath = this.component?.icon ?? $r(&#39;app.media.default_icon&#39;) ``` - **类型安全检查**： ```typescript if (component && typeof component.icon === &#39;string&#39;) { // 安全访问逻辑 } ``` #### 4. 工程配置检查 1. 确认`build-profile.json5`中资源配置正确 2. 执行`File > Invalidate Caches`清除缓存 3. 检查`oh-package.json5`依赖版本兼容性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值