首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在window.addEventListener('DOMContentLoaded',myfunction(){...})之后没有显示按钮的实际长度?

在使用window.addEventListener('DOMContentLoaded', myfunction(){...})之后没有显示按钮的实际长度,可能是由于以下原因:

  1. CSS样式问题:按钮的实际长度可能受到CSS样式的影响,例如width属性、padding属性、border属性等。请确保CSS样式正确设置,以确保按钮的实际长度能够正确显示。
  2. JavaScript代码问题:在myfunction()函数中可能存在错误或者缺少必要的代码,导致按钮的实际长度无法正确显示。请检查myfunction()函数中的代码逻辑,确保按钮的实际长度能够正确计算和显示。
  3. DOM元素加载问题:window.addEventListener('DOMContentLoaded', myfunction(){...})事件监听器会在DOM文档加载完成后触发,但是如果按钮的相关DOM元素在该事件触发之前被动态添加或者修改,可能会导致按钮的实际长度无法正确显示。请确保按钮的相关DOM元素在事件触发之后才进行操作。
  4. 其他因素:除了上述可能的原因外,还可能存在其他因素导致按钮的实际长度无法正确显示。例如,浏览器兼容性问题、网络加载问题等。建议使用浏览器开发者工具进行调试,查看相关错误信息和警告,以便更好地定位和解决问题。

需要注意的是,以上提供的是一般性的解决思路,具体问题需要根据实际情况进行分析和解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端资源浏览器渲染原理

frame转为屏幕上实际像素点; 包括将元素可见部分进行绘制,比如文本、颜色、边框、阴影、替换元素(比如img) 渲染流程可以参考下图 : 完成以上五步 成功浏览器渲染出 对应 xx.html...渲染html时候 js 没有继续构造DOM能力 如果需要需要部分 会先停止构建,下载js 执行脚本 把需要构建东西构建完成后 继续执行构建 DOM 这么做有什么好处?...: 现在开发模式中 大多都是使用vue和React 作为开发框架 JS 占比往往很大 处理事件也会变长 这也导致了 如果解析阻塞 那么脚本解析完成之前 可能界面什么都不显示 这里 js 给我们提供了两个属性...它特性: 浏览器不会因 async 脚本而阻塞(与 defer 类似); async脚本不能保证顺序,它是独立下载、独立运行,不会等待其他脚本 async不会能保证DOMContentLoaded之前或者之后执行... window.addEventListener("DOMContentLoaded", () => { console.log("DOMContentLoaded

57120
  • BOM

    如果使用 addEventListener 则没有限制 第2种 document.addEventListener('DOMContentLoaded',function(){}) DOMContentLoaded...第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。...案例:发送短信倒计时 点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信 案例分析 ① 按钮点击之后,会禁用 disabled 为true  ② 同时按钮里面的内容会变化, 注意 button...里面的内容通过 innerHTML修改 ③ 里面秒数是有变化,因此需要用到定时器 ④ 定义一个变量,定时器里面,不断递减 ⑤ 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态...该对象包含用户(浏览器窗口中)访问过URL。 history对象一般实际开发中比较少用,但是会在一些 OA 办公系统中见到。

    1.3K20

    domReady理解

    domReady理解 domReady是名为DOMContentLoaded事件别称,当初始HTML文档被完全加载和解析完成之后DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架完全加载...根据计算好信息绘制整个页面,系统会遍历渲染树,并调用paint方法,将内容显示屏幕上。...再来看一下DOMContentLoaded事件与load事件触发时机: 当初始HTML文档被完全加载和解析完成之后DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架完全加载...,当然解析CSS与DOM是需要等待前边Js解析完毕;当JsCSS之后时,则DomContentLoaded事件需等到CSS与Js加载完毕才能够触发,上文也提到了CSS加载会阻塞Js加载,而Js...解析到没有设置异步加载时候,阻塞文档解析,等待Js脚本加载并且执行完成后,才会继续解析文档。

    1K31

    如何做好前端日志和异常监控思考

    ,通常是指用户页面上进行一些操作时候,出现了一些异常,比如点击按钮无反应、输入框无法输入等等,这个问题,我们可以通过一些手段来定位。...假如说,我们有一个这样场景,用户点击一个按钮,理论上点击按钮会发送一个请求,成功失败可能都会有一个界面上反馈,但是如何点击之后,界面没有任何反馈,这个时候就,我们基本上可以判定,这种时候就是页面交互异常了...,通常是指用户打开页面之后,页面长时间没有任何反应,这个问题,我们可以通过一些手段来定位。...我们可以通过window.addEventListener('DOMContentLoaded', function() {})来捕捉页面的加载事件,然后在里面做一些判断,比如:window.addEventListener...比如,用户反馈说,我点击了一个按钮,但是没有反应,这个时候,我们就可以通过用户行为日志来定位问题。

    1.3K20

    前端成神之路-WebAPIs04

    } }) 1.1.4 案例:模拟京东快递单号查询 要求:当我们文本框中输入内容时,文本框上面自动显示大字号内容。...如果页面的图片很多的话, 从用户访问到onload触发可能需要较长时间, 交互效果就不能实现,必然影响用户体验,此时用 DOMContentLoaded 事件比较合适。...指向是btn这个按钮对象 }) // 3....该对象包含用户(浏览器窗口中)访问过URL。 ? history对象一般实际开发中比较少用,但是会在一些 OA 办公系统中见到。 ? 1.3....同步 ​ 前一个任务结束后再执行后一个任务,程序执行顺序与任务排列顺序是一致、同步。比如做饭同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

    1.5K10

    用框架你,可能早已忽略了这些事件API

    因此,alert 显示其大小为零。 乍一看,DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它触发条件。它并没有什么特别之处。...你可能在某些网站上看到过(如果你使用浏览器自动填充)—— 登录名/密码字段不会立即自动填充,而是页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前延迟。...下面的这个示例正确显示了图片大小,因为 window.onload 会等待所有图片加载完毕: window.onload = function() { // 与此相同 window.addEventListener...; }; 它行为已经改变了,因为有些站长通过显示误导性和恶意信息滥用了此事件处理程序。所以,目前一些旧浏览器可能仍将其显示为消息,但除此之外 —— 无法自定义显示给用户消息。...readyState 如果我们将 DOMContentLoaded 事件处理程序设置文档加载完成之后,会发生什么? 很自然地,它永远不会运行。 某些情况下,我们不确定文档是否已经准备就绪。

    1.8K10

    h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间

    如果没有前一个网页,或者之前网页跳转不是同一个域名内,则返回值为0。...如果没有前一个网页,或者之前网页跳转不是同一个域名内,则返回值为0。...view, String title) { view.loadUrl("javascript:" + "window.addEventListener('DOMContentLoaded', function...,这样比较符合网页实际体验并且比较节省设备运行资源; 具体实现上我采用是最后一种,即“首屏高度内图片加载法”;因为通常需要考虑首屏时间页面,都是因为首屏位置内放入了较多图片资源。...,这样比较符合网页实际体验并且比较节省设备运行资源; 具体实现上我采用是最后一种,即“首屏高度内图片加载法”;因为通常需要考虑首屏时间页面,都是因为首屏位置内放入了较多图片资源。

    3.6K10

    目前为止整理最全前端监控体系搭建篇(长文预警)

    PerformanceTiming DOMContentLoaded FMP 4.5.1 阶段含义 初始化页面,同一个浏览器上下文中前一个页面unload时间戳,如果没有前一个页面的unload...Contentful Paint)(最大内容渲染) 代表viewport中最大页面元素加载时间 DCL (DomContentLoaded)(DOM加载完成) 当 HTML 文档被完全加载和解析完成之后...当初始 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载 L Load 检测一个完全加载页面,页面的html、css、...监控cpu占用情况,可以帮助分析应用程序实际业务中状况。合理设置监控阈值能够很好地预警 cpu load监控 cpu load又称cpu平均负载。...dns监控 dns是网络应用基础,实际对外服务产品中,多数都对域名有依赖。dns故障导致产品出现大面积影响事件并不少见。

    10.5K45

    BOM

    定义全局作用域中变量、 函数都会变成window对象属性和方法。 调用时候可以省略window,前面学习对话框都属于window对象方法,如alert0、prompt0等。...如果使用addEventListener则没有限制 第2种 ? DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。...案例分析: ①按钮点击之后,会禁用disabled为true ②同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改 ③里面秒数是有变化,因此需要用到定时器 ④定义一个变量,...定时器里面,不断递减 ⑤如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。    ...该对象包含用户(浏览器窗口中)访问过URL。 ? history对象一般实际开发中比较少用,但是会在一些 OA 办公系统中见到。 ?

    1.4K10

    webapi(五)- 事件对象

    两个阶段:先捕获冒泡 捕获阶段是 从父到子 冒泡阶段是 从子到父 事件冒泡 当一个元素事件被触发时,同样事件将会在该元素所有祖先元素中依次被触发。...直接使用null覆盖就可以实现事件解绑 都是冒泡阶段执行 // 需求:按钮点击事件只能触发一次 // 解绑事件 // 解绑语法: 元素.onclick = null btn.onclick...} 事件监听注册(L2) 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) 后面注册事件不会覆盖前面注册事件(同一个事件) 可以通过第三个参数去确定是冒泡或者捕获阶段执行...() { }) 事件名:DOMContentLoaded 当初始 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发,而无需等待样式表、 图像等完全加载...,如果都没有则以 文档左上角 为准 client家族 clientWidth和clientHeight (只读) 获取元素可见部分宽高(不包含边框,滚动条等) clientLeft和clientTop

    1K20

    「Web编程API」- 04

    }) 1.1.4 案例:模拟京东快递单号查询 要求:当我们文本框中输入内容时,文本框上面自动显示大字号内容。...如果页面的图片很多的话,从用户访问到onload触发可能需要较长时间, 交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded事件比较合适。...指向是btn这个按钮对象 }) // 3....该对象包含用户(浏览器窗口中)访问过URL。 history对象一般实际开发中比较少用,但是会在一些 OA 办公系统中见到。 1.3. JS执行机制 以下代码执行结果是什么?...同步 前一个任务结束后再执行后一个任务,程序执行顺序与任务排列顺序是一致、同步。比如做饭同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

    89020

    你好,谈谈你对前端路由理解

    单页面 时代进步,科技发展,面对日益增长网页需求,网页开始走向模块化、组件化道路。随之而来是代码难以维护、不可控、迭代艰难等现象。...第一次加载时候,不会执行 hashchange 监听事件,默认执行一次 // DOMContentLoaded 为浏览器 DOM 加载完成时触发 window.addEventListener...('DOMContentLoaded', Load) window.addEventListener('hashchange', HashChange) // 展示页面组件节点...只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器回退按钮(或者Javascript代码中调用history.back()或者history.forward()方法) “小知识:pushState...('DOMContentLoaded', Load) window.addEventListener('popstate', PopChange) var routeView = null

    98620

    JavaScript学习笔记(二)

    13.1 JavaScript事件调用方式 13.1.1 script标签中使用 点击按钮执行displayDate()函数,显示当前时间信息 点击按钮执行displayDate()函数,显示当前时间信息 显示时间...y=window.event.y; window.status="X: "+x+" "+"Y: "+y; } document.onmousemove=MousePlace; 状态栏中显示了鼠标页面中的当前位置...现在正式开始学习正则表达式-2020年2月7日14:33:14 以前也接触过,自己做项目的时候也用到过电话号码校验,但是没有正式系统学过,今天把它补上。...n之后也匹配 14.1.2 表达式 [abc] 查找方括号之间任何字符 [^abc] 查找任何不在方括号之间字符 [0-9] 查找任何从零到9数字 [a-z] 查找小写字母 (red|blue

    88120

    【Web技术】913- 谈谈你对前端路由理解

    1、为什么会出现前端路由。 2、前端路由解决了什么问题。 3、前端路由实现原理是什么。 我们带着这三个问题,继续往下看,阅读过程中如果同学们有自己见解,可以评论区发表自己看法。...“瞎了”同学,我再教一个方法,就是浏览器页面右键,点击“显示网页源代码”,打开后如下所示: ?...第一次加载时候,不会执行 hashchange 监听事件,默认执行一次 // DOMContentLoaded 为浏览器 DOM 加载完成时触发 window.addEventListener...('DOMContentLoaded', Load) window.addEventListener('hashchange', HashChange) // 展示页面组件节点...('DOMContentLoaded', Load) window.addEventListener('popstate', PopChange) var routeView = null

    64320

    浏览器常见考点

    除此之外,这还能解释为什么script标签为什么会阻塞 DOM 树渲染,毕竟 JS 是可以修改 DOM ,如果 JS 执行时候 UI 也工作,就有可能导致不安全渲染。...interactive:document 加载成功,DOM 树构建完成 complete:图像,样式表和框架之类子资源完成加载 所以,DOMContentLoadedonload前进行。...DOMContentLoaded事件 DOM 树构建完毕后被触发,我们可以在这个阶段使用 js 去访问元素。 async和defer脚本可能还没有执行。 图片及其他资源文件可能还在下载中。...unload在用户已经离开时触发,我们在这个阶段仅可以做一些没有延迟操作,由于种种限制,很少被使用。...document.addEventListener("DOMContentLoaded", () => { console.log("DOMContentLoaded"); }); window.addEventListener

    1K20
    领券