开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Javascript元素offsetHeight在for循环中返回0

JavaScript元素的offsetHeight属性返回元素的高度，包括元素的高度、内边距和边框，但不包括外边距。在for循环中，如果offsetHeight返回0，可能有以下几个原因：

元素尚未被渲染：在for循环中获取元素的offsetHeight属性时，如果元素尚未被渲染或者尚未添加到DOM树中，offsetHeight会返回0。这可能是因为JavaScript在执行for循环时，元素还没有加载完成或者被添加到页面中。
元素样式隐藏：如果元素的样式设置为display: none;或者visibility: hidden;，元素将不会被显示在页面上，此时获取offsetHeight属性会返回0。这可能是因为在for循环中，元素的样式被修改为隐藏状态。
元素高度为0：如果元素的高度设置为0，或者元素没有内容或者没有设置高度相关的样式，获取offsetHeight属性会返回0。这可能是因为在for循环中，元素的高度相关的样式被修改为0或者未设置。

为了解决这个问题，可以采取以下措施：

确保元素已经加载完成：在使用offsetHeight属性之前，可以使用DOMContentLoaded事件或者window.onload事件来确保元素已经加载完成。
检查元素的显示状态：在获取offsetHeight属性之前，可以检查元素的样式是否设置为display: none;或者visibility: hidden;，如果是，则需要将元素的显示状态修改为可见。
检查元素的高度设置：在获取offsetHeight属性之前，可以检查元素的高度是否设置为0，或者是否存在高度相关的样式。如果没有设置高度，可以尝试设置一个合适的高度。

腾讯云相关产品和产品介绍链接地址：

相关搜索:&&运算符在JavaScript中返回0 (RESTFUL api Javascript get函数)在映射中找不到account如何返回0？JAVASCRIPT / REACT:为for循环中的每个元素返回HTML Javascript在循环中忽略包含文本字符串的特定元素 S3ToRedshiftTransfert在创建的表中返回0元素在awakeFromNib中调用时，UserDefaults返回0个元素在d3.csv()函数中，Javascript array.length在.push()之后返回0 在forEach循环中使用Javascript FileReader追加元素在forEach循环中返回Javascript 在for循环中拼接返回错误的值JAVASCRIPT

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight 发布时间：2020-07-17 09:27:20 来源：亿速云阅读：223 作者：...就只是border-top-width 类似的属性还有一个clientLeft，顾名思义…… offsetHeight，只读元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框...当元素的style.display设置为 “none” 时，offsetParent返回null。它返回当前元素相对于其offsetParent元素的顶部的距离。...所以当滚动条在最顶端的时候，scrollTop=0，当滚动条在最低端的时候，scrollTop=115 这个115怎么来的(滚动条高度是15，我量的)，见下图。(实为我主观臆测，不保证准确性。。。...= 0 一个简单的返回顶部的时间，一个需要注意的地方是，动画是由快到慢的。

2.1K2 0

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…

就只是border-top-width 类似的属性还有一个clientLeft，顾名思义…… offsetHeight，只读元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框...当元素的style.display设置为 “none” 时，offsetParent返回null。它返回当前元素相对于其offsetParent元素的顶部的距离。...所以当滚动条在最顶端的时候，scrollTop=0，当滚动条在最低端的时候，scrollTop=115 这个115怎么来的(滚动条高度是15，我量的)，见下图。(实为我主观臆测，不保证准确性。。。...= 0 一个简单的返回顶部的时间，一个需要注意的地方是，动画是由快到慢的。...`; } 到此这篇关于JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记的文章就介绍到这了,更多相关JavaScript scrollTop

7742 0

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）

HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。...三、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。...我们已经知道 offsetHeight 是自身元素的宽度。而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐蔽的项目组。...与style.width属性的差别在于:如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值...4.offsetHeight : 与style.height属性的差别在于:如对象的宽度设定值为百分比高度，则无论页面变大还是变小，style.height都返回此百分比，而offsetHeight则返回在不合页面中对象的高度值而不是百分比值

7.6K2 0

scrollwidth和clientwidth_vue监听页面滚动

我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。...,clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远...对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...6.style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px....利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如

1.7K1 0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。...,clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远...对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...6.style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px....利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em

6.7K2 0

JS 中的offset、scroll、client总结

1. offset offset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分 offsetParent属性返回一个对象的引用...，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。...offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top obj.offsetLeft 指 obj 相对于版面或由...包括padding clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变 clientHeight 对象可见的高度 clientTop、clientLeft 这两个返回的是元素周围边框的厚度...，一般它的值就是0。

2.1K3 0

JS-JavaScript学习笔记（一）

reverse();颠倒数组元素顺序 slice(start,end);从已有数组中返回指定元素 sort(方法函数);使数组按一定顺序排序样例：...延迟时间)，在加载后延迟指定时间后,去运行一次表达式,仅运行一次。...(3)浏览器窗体可视区域大小在不同浏览器都有用的 JavaScript 方案： var w= document.documentElement.clientWidth || document.body.clientWidth...(5)网页尺寸offsetHeight offsetHeight = clientHeight + 滚动栏 + 边框。...|| document.body.offsetHeight; 參考站点：http://www.imooc.com/learn/10 学习站点：http://www.dreamdu.com/javascript

3112 0

js实现拖动组件移动效果

" src="Drag.js"> //------------------------Utility--...---------------------- function findPosX(obj) {//辅助函数得到元素左边与浏览器左边的边距 var curleft = 0; if (obj && obj.offsetParent...this.offsetHeight:this.offsetHeight - 2) + "px"; //this指的是item this.style.width = this.offsetWidth...{ columnIndex = i; } } //如果columnIndex在循环中没有被赋值则表示当前拖动对象在第一列的左边 //此时也把它放到第一列 var column...= this//不能跟拖动元素自己比较否则不能在本列向下移动 && top < findPosY(this.column.childNodes[i])){//从上到下找到第一个比拖动元素的上边距大的元素

10K2 0

【叔小生】JavaScript进阶篇

-6 -7 随机数 random() random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。...join() 把数组的所有元素放入一个字符串 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度 reverse() 颠倒数组中元素的顺序...shift() 删除并返回数组的第一个元素 slice() 从某个已有的数组返回选定的元素 sort() 对数组的元素进行排序 splice() 删除元素，并向数组添加新元素 toSource(...定义数组myarr并赋值，然后颠倒其元素的顺序： var myarr = new Array(3) myarr[0] = "1"...slice() slice() 方法可从已有的数组中返回选定的元素。

1.2K3 0

高性能JavaScript

从《高性能JavaScript》一书中的整理笔记： 1、将经常使用的对象成员、数组项、和域外变量存入局部变量原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员...5、DOM操作量化问题： // 在循坏中更新页面，问题所在：每次循环都对DOM元素访问了两次 // 一次是读取document.getElementById('here').innerHTML的内容...9、需要考虑实际情况的优化，根据7，可以将集合中的元素通过for循坏赋值到数组中，访问数组的数组快于集合。但是要注意对于复制的开销是否值得。...、clientTop、clientLeft、clientHeight、geteComputedStyle()(在IE中此函数成为currentStyle)；浏览器此时不得不进行渲染队列中带改变的项目，并重新排版以返回正确值...从文档流中摘除该元素，摘除该元素的方法有： a、对其应用多重改变 b、将元素带回文档中 c、使其隐藏，进行修改后在显示 d、使用文档片段创建子树，在将他拷贝进文档 var doc = document;

6851 0

web前端开发初学者十问集锦（3）

relative定位中使用bottom:0px;right:0px;使元素定位于父元素的最下边或者最右面，没有效果是因为relative定位的参考对象是自己。...但是在使用内部样式表的时候，style标签和script标签一样，可以放置在html文件中的anywhere，任何地方。 4.JavaScript如何获取html元素的宽度和高度？...因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。...三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。 5.如何获取html元素的样式，如内边距？...实测，在Chrome中有效果，在IE9以及Fire Fox中没有效果。 8.js（JavaScript）中单引号和双引号有什么区别？一个Web大神告诉我说没什么区别，我实验了，还没发现有什么区别？

1.6K2 0

JavaScript 笔记

(因为面向对象需要具有封装、继承、多态的特征) 在浏览器上执行的脚本 1. JavaScript 2....在 HTML 中如何使用 JavaScript *1....getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 ...getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 ...*charAt() 返回在指定位置的字符。 charCodeAt()返回在指定的位置的字符的 Unicode 编码。

1.8K6 0

vue项目中div切换显示与隐藏状态时的动画效果

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before...; el.style = "padding-left: 0px"; //done(); }, //用不到可以不写 afterEnter: function (el) {}, //显示到隐藏...= "padding-left: 0px"; done(); }, afterLeave: function (el) { el.style = "padding-left: 300px...当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。...推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

3.7K1 0

JS-元素大小深入学习-offset、client、scroll等学习研究笔记

一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。 1.偏移量（offset dimension）测试代码： 1 23 24 25 26 js代码： 1 <script type="text/<em>javascript</em>...//有无滚动条不受影响 //height同理以上理论，经测<em>在</em>谷歌和火狐中都适用。...offsetLeft 和 offsetTop offsetLeft/<em>offsetHeight</em>是<em>元素</em>的左边框/上边框到其最近的、具有大小的<em>元素</em>左边框/上边框的距离。...3.scrollHeight（client dimension） scrollHeight<em>返回</em><em>元素</em>的完整的高度,以像素为单位

8758 0

clientWidth，offsetWidth，scrollWidth你分的清吗

对于inline的元素这个属性一直是0 offsetWidth/offsetHeight offsetWidth/offsetHeight计算时包含 content + padding + border...定位，直到找到body，并且即使元素会被滚动，这个值也不会改变 scrollWidth/scrollHeight scrollWidth/scrollHeight 返回值包含 content + padding...在没有滚动条时scrollTop==0。...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...clientHeight和offsetTop,并和列表的高度区间做比较，计算出元素是在列表视口的内部，还是溢出的视口，如果溢出了视口，那么就回滚。

1.9K1 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下...，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth...（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。...（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

16.1K1 0

JavaScript 编程精解中文第三版十四、文档对象模型

属性offsetWidth和offsetHeight给出元素的起始位置（单位是像素）。像素是浏览器中的基本测量单元。...document对象和元素节点中都定义了querySelectorAll方法，该方法接受一个选择器字符串并返回类数组对象，返回的对象中包含所有匹配的元素。...如果只想寻找某一个特殊元素，该方法非常有用。该方法只返回第一个匹配的元素，如果没有匹配的元素则返回null。位置与动画 position样式属性是一种强大的布局方法。...若我们只是在循环中更新 DOM，页面会静止不动，页面上也不会显示任何东西。浏览器不会在执行 JavaScript 程序时刷新显示内容，也不允许页面上的任何交互。...常量π在 JavaScript 中为Math.PI。猫的动画代码保存了一个名为angle的计数器，该绑定记录猫在圆上的角度，而且每当调用animate函数时，增加该计数器的值。

1.4K2 0

每天10个前端小知识【Day 3】

由于 mouseenter 不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其 mouseover 和 mouseout 事件，但是却不会触发 mouseenter 和 mouseleave...clientLeft 返回的左边框的宽度。 offsetWidth/offsetHeight 返回的是元素的布局宽度，它的值包含 content + padding + border 包含了滚动条。...offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。 offsetLeft 返回的是当前元素相对于其 offsetParent 元素的左部的距离。...toPrecision 用于处理精度，精度是从左至右第一个不为 0 的数开始数起。 toFixed 是对小数点后指定位数取整，从小数点开始数起。...是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

1161 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下...，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度...（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。...（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

8.1K3 0

放大镜原理

相关技术鼠标事件；背景图片样式；元素的尺寸属性和数学计算； HTML骨架 <!...300px; margin-left: 20px; display: none; background-repeat: no-repeat; } 上面代码中，图片没有设置高度，我们在JavaScript...JavaScript的编写要动态获取图片宽度，然后初始化一些样式。...; // 下面的判断是为了让鼠标移动时滑块更够在指定的区域显示 if (leftX < 0) { leftX = 0; } else if (leftX > (...{ topY = 0; } else if (topY > (img_H - slide.offsetHeight)) { // 这里是不让滑块高度超过展示区域

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭