js取得、設置高度問題(offsetHeight為0) ,window.onload()執行時間

最新推荐文章于 2022-10-08 13:29:23 发布
最新推荐文章于 2022-10-08 13:29:23 发布
阅读量593 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lfq2011/archive/2009/05/15/1457871.html
博客提到要等到文档全部加载完，才执行window.onload内的函数，并给出了转载来源。主要围绕JavaScript中文档加载与函数执行时机相关内容。

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

  等到文档全部加载完,才执行window.onload內的函数

ContractedBlock.gifExpandedBlockStart.gifCode
 1 <table id="tbEdit">
 2 ……
 3 </table>
 4 <div id="divFill" style="height:260px"></div>
 5 <script type="text/javascript">
 6 window.onload = function()
 7 {
 8    document.getElementById('divFill').style.height = (500 - document.getElementById('tbEdit').offsetHeight) +"px";
 9    alert("inner:"+document.getElementById('divFill').style.height);
10 }        
11    alert("outer:"+document.getElementById('divFill').style.height);
12 </script>

 

转载于:https://www.cnblogs.com/lfq2011/archive/2009/05/15/1457871.html

onload什么时候执行
ios0213的专栏
06-25 9074
在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下： window.onload = function(){// some thing to do}; 但 是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图
offsetHeight在OnLoad中获取为0的现象
09-05
然而，在某些特定情况下，尤其是在页面加载（OnLoad）事件中尝试获取 `offsetHeight` 时，可能会遇到返回值为 0 的问题。这个问题通常与元素的实际渲染状态、浮动布局以及浏览器兼容性有关。 在提供的代码片段中，...
火狐在用offsetHeight获取div的高度时为0的解决方法
09-25
火狐在需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象，下面为大家介绍下比较实用的解决方法，感兴趣的朋友可参考下
JS中使用offsetHeight 获取元素高度为0问题
m0_50981596的博客
10-08 3359
JS中使用offsetHeight 获取元素高度为0问题
window.onload中动态获得img的高度
weixin_34015336的博客
03-12 218
$(function(){}); window.onload=function(){} $(function(){}) 是在DOM结构渲染完成以后调用的，这时候网页中一些资源还没有加载，比如图片等资源，但是DOM结构已经渲染成功了 window.onload是在网页DOM结构渲染完成，而且资源已经加载成功以后调用的。 当我们在$(function(){})调用$('img').width()的时...
[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
07-20
You can achieve this by placing your code inside the `window.onload` callback function. ```javascript window.onload = function() { // Your code here }; ``` 2. Ensure that you are referencing ...
chunk-KA5WTIUD.js?v=61030455:604 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload
最新发布
03-25
当遇到 `ECharts` 无法获取 DOM 宽高的问题时，通常是因为目标容器尚未完成渲染或者其宽高被设置为零。以下是可能的原因以及解决方案： #### 原因分析 1. **DOM 尚未完全加载** 如果初始化图表的时间早于页面上...
// 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999";这是我的代码，经过上面设置后，当表格行数过多时任然会存在放大图片的悬浮窗未在屏幕中心，靠近页面底部，且只显示一半图片
07-14
为了解决这个问题，你可以将固定的 `top` 和 `left` 值改为动态计算，以确保悬浮窗总是居中显示。以下是修改的代码示例： ```javascript // 居中弹出窗口 function centerPopup() { var windowWidth = window....
function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };根据你提供的代码，我修改后任然存在行数过多时，悬浮窗显示后靠近页面底部，无法显示完整图片在当前页面，并且我需要在点击放大图片后无法再此点击当前放大图片，等我还原取消悬浮窗后才可以再次点击图片放大，我代码存在什么问题
07-14
您可以尝试将`scrollTop`的计算方式修改为`scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;`，以确保在不同浏览器中都能正确获取滚动的偏移量。 2. 图片无法...
JS定时器与 onload详解(三)
每天进步一点点
07-02 959
一.JS定时器 定时器：固定一个周期，执行某一项任务 1.设置定时器 循环定时器： setInterval() 一次性定时器： setTimeout() 代码: <script> function run1(){ alert("你好"); } //循环定时器： //setInterval("run1()",2000);//每隔2秒，执行一次run1方法 //一次性定时器： setTimeout("..
apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题
weixin_34384557的博客
01-01 141
apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题 原HTML <div class="row aui-text-center"> <div class="aui-col-xs-2" style="cursor: pointer;" onclick="api.closeWin({})...
js中offsetHeight,clientHeight等属性
qq_35500925的博客
03-20 206
/** * 元素的属性： * offsetWidth: 该元素的width + 左右padding值 + 左右border-width * offsetHeight: 该元素的height + 上下padding值 + 上下border-width * clientWidth: 该元素的width + 左右padding值 * cli...
JS中window.onload()事件
weixin_44134816的博客
03-17 3294
1.onload事件会在整个页面加载完成后才会触发 2.window绑定一个onload事件 --该事件对应的响应函数将会在页面加载完成之后执行 --这样可以确保代码执行时所有的DOM对象已经加载完毕 --html执行顺序从上到下（js代码在body前面，会导致先执行js代码，再加载dom对象），window.onload()可以解决这个问题 例如： window.onload=function(){ ---函数中放js代码 } ...
js的offsetHeight offsetWidth
daditao的专栏
03-09 918
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获
文档声明<!DOCTYPE html>导致document.body.offsetHeight取值为0
tjmljw的专栏
03-03 884
  关于通过JS获取窗口高度和宽度的问题，如果使用了文档声明（&lt;!DOCTYPE html&gt;），则取得document.body.offsetHeight的值是0，删除文档声明后，则可以取得正确的值，可见文档声明对JS是有影响的，时间关系没有详细调查，下面的一篇文档可以作为参考。   DOCTYPE声明对JS获取窗口宽度和高度的影响 ...
js使用offsetHeight获取div高度为0的问题
weixin_30951389的博客
10-02 2839
今晚试了好久没弄出来，后来获取子一层的div就能获取到高度了 我的情况是这样的：我在最外面写一个<div id="mainBody">, 里面写bootstrap的div，获取mainBody的offsetHeight为0，而子div(bootstrap的div)能够显示offsetHeight。 百度了好久，终于找到一个网页：http://bbs.csdn...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值