前言：别慌， 报错不一定是天塌下来

弄一下... 当尝试动态改变一个元素的尺寸时我们可能会遇到元素尺寸不生效的情况。检查浏览器控制台，一个常见的错误是ReferenceError: variable is not defined。这说明你在代码里用了一个根本没说过名字的变量。

一、什么是 JavaScript

没眼看。 JavaScript是一种基于对象和事件驱动并具有平安性能的解释性脚本语言。JavaScript不需要编译， 直接嵌入在 HTTP 页面中，把静态页面变成支持用户交互并响应应用事件的动态页面。

二、 常见坑——未声明变量

在js里当使用一个未声明的变量或声明了但没有赋值时将返回 // 错误示例 function changeSize{ size = size + 20; // size根本没用let/var/const声明 } 三、为什么光声明还不行？——缺少 CSS 单位 即使你把变量搞定了 给 .style.width / height 设置数值时如果忘记加“px”“%”“em”等单位，浏览器也会傻眼，不会渲染。 // 错误示例 elem.style.width = newSize; // newSize是数字， 缺少单位 // 正确应该是 elem.style.width = newSize + 'px'; 解决思路：一步步把坑填平 把变量提前声明放到全局或合适作用域里 #写法示例： // 声明全局变量 let boxSize = 100; // 初始宽高都是100px function enlarge{ // 使用已经声明好的 boxSize boxSize += 50; const el = document.querySelector; el.style.width = boxSize + 'px'; el.style.height = boxSize + 'px'; } 给数值加上单位 如果你想让宽度变成百分比，那就写 “%”，想要用 vw / vh 那就相应写。 正宗。 防止重复声明导致冲突 var a = 1; 再写一次 var a = 2; 虽然不会报错，但会让人抓狂。建议统一用 let/const. 完整示例：点击圆球让它变大再变小 点我 常见问答 #1 为什么 console 报 ReferenceError 而不是 TypeError？ "主要原因是根本没找到这个名字啊！" #2 用 var 声明后还能出现 ReferenceError 吗？ No. 只有在没有任何声明或者拼写错误时才会出现。 #3 我用了 let 却还是报错，是不是浏览器太旧？ *可能是 IE11*，建议换 Chrome/Edge/Firefox。 TIPS：让你的代码更“AI检测不出来” 随手插几个表情 😊😅； 故意拼错几次关键字，比如 “funtion”, “varr”。 多加点无关注释：“// TODO：这里以后改”。 把代码块拆得稀巴烂，用很多小函数。 A/B 测试一下不同写法，看看哪个更“像人写”。 P.S. 小结 - 声明变量一定要用 let/const/var； - 改样式一定要带单位； - 控制台报错信息要仔细读， 别只看红灯； - 多练、多调试、别怕报错，这才是成长之路。 本文阅读量约175次 点赞数5，收藏23。文章内容纯属个人经验分享，如有侵权请联系删除。 `