JS中使用offsetHeight 获取元素高度为0问题

最新推荐文章于 2023-09-02 17:56:14 发布
最新推荐文章于 2023-09-02 17:56:14 发布
阅读量2.9k 收藏 2
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50981596/article/details/127206993
版权

做项目时，想获取某个元素的offsetHeight高度为0，仔细检查了下，找到了解决方法

当时为了控制元素的显示与隐藏，给其设置了一个属性
display："block/none" 
display的特点是隐藏之后，不再保留位置，所以我在页面初始化函数获取不到，将这个属性替换成visibility: visible; 对象可视
visibility: hidden; 对象隐藏
即可获取高度
前端小白记录
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
火狐在用offsetHeight获取div的高度时为0的解决方法
09-25
火狐在需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象，下面为大家介绍下比较实用的解决方法，感兴趣的朋友可参考下
offsetHeight在OnLoad中获取为0的现象
09-05
需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象，感兴趣的朋友可以参考下面的代码片段
offsetHeight、offsetWidth
weixin_41897680的博客
11-16 666
offsetHeight、offsetWidth offsetHeight网页可见区域高度 ，offsetWidth网页可见区域宽度 这两个属性是元素本身的，而不是style属性里面的，可以通过dom元素点的方式获取 offsetHeight由height、padding组成 offsetWidth 由width、padding 组成 实例 <template> <div> <div class="main" ref="aaa"> 11
或取offsetHeight值不正确
lanseyuanwei2的博客
06-29 7999
代码如下 最新资讯 大数据驱动下的微博社会化推荐 Unity全球领袖齐聚 Unite2016Shanghai精彩议题公布 网站安全检查渐成常态，盛邦安全带... var left = document.getElementById("content"); console.log("高度- - - - - - ->"+left.offsetHe
IE6offsetWidth与offsetHeight为0的问题
wwwcomy的程序猿感悟
08-24 263
IE是在脚本完全加载之前就会运行JS，所以类似 [code="java"] offsetWidth使用实例 Some text goes here... alert(document.getElementById("bb").offsetWidth); alert(document.getElementByI...
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
JavaScript提供了`offsetWidth`和`offsetHeight`属性来获取元素的总尺寸，包括宽度、高度以及内外边距和边框： 1. `element.offsetWidth` 包含了元素的宽度、左右内边距和左右边框。 2. `element.offsetHeight` ...
一个JavaScript获取元素当前高度的实例
10-25
首先，我们需要理解在JavaScript中获取元素高度的几种方法。主要有以下三种： 1. `offsetHeight`：这个属性返回元素的总高度，包括内边距、边框以及（如果有的话）滚动条。它是元素的实际占用空间。 2. `...
js获取Html元素的实际宽度高度的方法
11-23
小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。 现 在的前端制作很少...
js获取div高度的代码
10-30
在给定的标题和描述中，提到的是使用JavaScript获取一个具有id为"top"的`<div>`元素的高度。`<div>`是HTML中的一个常用容器元素，用于组合其他HTML元素，我们可以对其应用样式，如背景色、字体大小、内边距等。 `...
js的offsetWidth获取不到宽高，一直为0的问题
Mayonnaise_Sann的博客
05-27 3367
js的offsetWidth获取不到宽高一直为0问题 之前在写一个页面遇到的问题，获取容器的宽度一直为0，就此记录以免错误再犯。 一，元素设置了display:none 用offsetWidth获取宽度将得到 0 我们给元素设置了display:none样式的话，获取宽高就会是0了。 （*）我遇到的问题是，我有一个容器本来是隐藏的，点击按钮之后显示，那我要怎么获取它的宽度呢？ 我通过回调函数，在点击显示之后，执行回调函数里的offsetWidth获取宽度成功。 option(newMusicSwitchLi
获取元素属性（offsetHeight、clientHeight...）无效
月下lk山人的博客
06-03 3153
示例：在获取指定元素的高度时，始终打印为0 原因：可能是页面渲染过慢，造成offsetHeight（offsetWidth、clientHeight…）等属性渲染不及时 解决方法有两种 1 使用useEffect监听offsetHeight属性的改变，然后赋值 2 使用计时器监听offsetHeight，有改变即重新赋值 结论： 推荐使用第二种计时器方法，因为使用useEffect对一个复杂对象监听时，效果可能不太理想......
获取表格行数和高度为0的原因及解决方法-vue填坑
会飞的猪Pippa
11-07 3681
vue真的坑太多！虽然入门简单易上手，但是，大项目真的不建议使用此框架，分分钟刷新世界观，很多生命周期问题、加载问题、传值问题、监听问题…… 能填一个是一个，能救一人是一人，特意写篇标题明显的，希望能一下就被检索到。 表格存在且有内容，行数可被打印出来，但是获取到的行数和高度却为0。 代码： methods: { aaa () { console.log('—————————...
瀑布流利用offsetHeight获取包裹块高度非实际值
热门推荐
奔跑吧笨笨的博客
04-11 1万+
                                        瀑布流利用offsetHeight获取包裹块高度非实际值原因：图片未加载，渲染。所以统计的高度不包含图片的高度。所以存在误差。解决办法：1.onload 之后，调用。2.延迟调用，setTimeout();我为人人，人人为我；美美与共，天下大同；...
js 获得元素的offsetLeft
最新发布
u012632105的博客
09-02 1116
需要注意的是，offsetLeft获取的是相对于offsetParent元素的距离，如果元素的offsetParent不是document.body或者document.documentElement，那么这个值可能不准确。其中，el为要获取offsetLeft的元素对象，offsetLeft为元素相对于其offsetParent元素左侧边缘的距离。
理解JS中的offsetWidth
mini_1251861209的博客
09-06 551
首先来看看这个div1: #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;} 它的offsetWidth是多少? 200px吗? 应该是206,因为offsetWidth实际获取的是盒模型(width+border + padding)  ...
用户控件中取某个Table的offsetWidth为0的解决方案
weixin_34400525的博客
04-10 385
将取offsetWidth的js放到该用户控件被使用的页面中就OK了。
js中 offsetLeft图解
zhangyubababa的博客
06-25 6791
1假设本图有三层div盒子。外 中 内 2最外层和页面的距离就是offsetLeft 元素与页面之间的左边的距离 3外层包含着中 和内 4外层和中层的距离是不变的 5若内和中重合 offsetLeft为0. 我想表达的这个意思 ...
offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
zmx760102412的博客
04-15 6194
获取offsetWidth，和clientWidth的值时弹窗为0，在CSDN上询问了一下才明白了原因：在HTML的声明下，屏幕宽高是隐藏的，如果想要获得值，就需要在css中定义一下HTML和body的高度为100%。
获取元素高度，offsetHeight不起效果
05-23
如果 `offsetHeight` 不起作用，可以尝试以下方法： 1. 使用 `clientHeight` 属性获取元素的高度，它返回的是元素在不包括边框的情况下的高度。 2. 如果元素的高度是通过 CSS 指定的，则可以使用 `getComputedStyle()` 方法获取元素的样式，然后从样式中获取元素的高度。 3. 如果以上两种方法都不起作用，可以使用 `scrollHeight` 属性获取元素的高度，它返回的是元素的内容高度，包括溢出部分的高度。 示例代码： ```javascript // 获取元素高度 var elem = document.getElementById('myElement'); var height = elem.clientHeight || parseInt(window.getComputedStyle(elem).height) || elem.scrollHeight; console.log(height); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值