获取元素属性（offsetHeight、clientHeight...）无效

示例：在获取指定元素的高度时，始终打印为0
原因：可能是页面渲染过慢，造成offsetHeight（offsetWidth、clientHeight…）等属性渲染不及时

const { useState, useRef } from 'react'const [height, setHeight] = useState(0) // 元素的高
const divRef = useRef() // 定义绑定到元素上的ref对象
const heightRef = useRef(0) // 记录绑定ref的元素高度<div ref={divRef}>......
</div>

解决方法有两种
1 使用useEffect监听offsetHeight属性的改变，然后赋值

useEffect(() => {setHeight(divRef.current?.offsetHeight)
}, [divRef.current?.offsetHeight])

2 使用计时器监听offsetHeight，有改变即重新赋值

useEffect(() => {const timer = setInterval(() => {// offsetHeight没有改变终止当前循环if (heightRe.current === divRef.current?.offsetHeight) return// offsetHeight改变时，重新赋值heightRe.current = divRef.current?.offsetHeightsetHeight(divRef.current?.offsetHeight)}, 300)return () => { // 离开页面时，卸载计时器clearInterval(timer)}
}, [])

结论：
推荐使用第二种计时器方法，因为使用useEffect对一个复杂对象监听时，效果可能不太理想

获取元素属性（offsetHeight、clientHeight...）无效相关推荐

JS获取元素属性和自定义属性
昨天有同事问我,怎么获取自定义元素的属性,我意识到这个确实是个问题,所有总结一下自己的心得. 获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value-) 2-获 ...
Selenium自动化测试-7.获取元素属性信息
------·今天距2020年76天·------ 这是ITester软件测试小栈第60次推文大家好我是vivi小胖虎做自动化测试往往避免不了获取元素信息获取元素属性获取元素状态今天就 ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
JS DOM获取元素属性+操作方法
JS DOM获取元素属性+操作方法文章目录 JS DOM获取元素属性+操作方法基础属性 title属性 tagName属性 : 获取标签名 className属性 : 获取类名 Nodelist. ...
js获取元素属性及事件
一.HTML中元素属性 1.offsetLeft :返回当前元素左边界到它上级元素的左边界的距离,只读属性: 注意: 获取的是( left 值 + 本身margin的值) 2.offsetTop ...
DOM常用几种获取元素属性方式
1.DOM 提供的方法(API)获取 1.1 H5新增获取元素方式 document.getElementsByClassName 根据类名获得某些元素集合 document.querySelecto ...
原生JS获取元素属性值
方法一第一步我们要获取到元素(比如用ID),不可以是类数组(比如用class),类数组除了有一些数组的基本特征不可以使用其他方法,你会报错的第二步目标元素必须设置position为absolu ...
java dom获取命名空间属性_Java DOM XML解析::获取元素属性值
如何从元素中提取属性值.我的xml节点是这样写的 &LT nodename attribute ="value">我需要将其解压缩以将其与另一个字符串进行比较. 但由 ...
JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数
//页面加载完成后执行$(function() { getHW();});//当用户改变浏览器大小改变时触发$(window).resize(function() { setHW(); });//每5 ...
airtest-poco获取元素属性值attr
poco有直接获取属性的接口get_text,get_name.有时我们想获取其他的属性值,这时就需要用到attr(),我用个实际的场景示范下,比如,我想获取qq头像框的visible属性值代码: ...

获取元素属性（offsetHeight、clientHeight...）无效

获取元素属性（offsetHeight、clientHeight...）无效相关推荐

最新文章

热门文章