有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案。
获取display为none元素的子元素的物理尺寸
方案一思路:
- 1、利用给元素添加行内样式:display:block;position:absolute;z-index:-1000
- 2、让隐藏元素变成block同时利用定位带出可视区,再获取下面元素的物理尺寸后
- 3、再给它还原成display为none,最后返回结果
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>获获取display为none元素的子元素的物理尺寸 :解决方案一
</title
>
</head
>
<body
>
<div
class="wrap" style
="display: none;">
<ul
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
</ul
>
</div
>
</body
>
<script
>
// 获取display为none元素下的子元素的高度
function getHeight
(parentSelector
,childSelector
){
let wrap
= document
.querySelector
(parentSelector
);
let aLi
= wrap
.querySelectorAll
(childSelector
);
let arr
= [];
wrap
.style
.cssText
= `display
:block
;position
:absolute
;z
-index
:-1000;`
for (var i
= 0; i
< aLi
.length
; i
++) {
arr
.push
(aLi
[i
].offsetHeight
)
}
wrap
.style
.cssText
= "display:none;"
return arr
}
console
.log(getHeight
('.wrap','li'))
</script>
</html
>
方案二思路:不推荐
1、这个方法需要用户事件触发让隐藏元素显示出来
2、开启一个定时器,间隔判断隐藏元素是否显示了
3、如果显示了,清除定时器,拿到结果再去操作
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>获获取display为none元素的子元素的物理尺寸 :解决方案二
</title
>
</head
>
<body
>
<div
class="wrap" style
="display: none;">
<ul
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
<li
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</li
>
</ul
>
</div
>
<button
class="btn">按钮
</button
>
</body
>
<script
>
// 获取display为none元素下的子元素的高度
let wrap
= document
.querySelector
('.wrap');
let aLi
= wrap
.querySelectorAll
('li');
let arr
= [];
let timer
=null;
timer
= setInterval
(function(){
// 用户操作后 让隐藏隐藏元素显示了 则获取结果 清除定时器
if(wrap
.offsetHeight
> 0){
for (var i
= 0; i
< aLi
.length
; i
++) {
arr
.push
(aLi
[i
].offsetHeight
)
}
clearInterval
(timer
)
console
.log(arr
)
}
},1000)
document
.querySelector
('.btn').onclick
=function(){
wrap
.style
.cssText
= "display:block;"
}
</script>
</html
>
获取display为none元素的物理尺寸
解决思路:
- 1、利用给元素添加行内样式:visibility:hidden
- 2、让隐藏元素变成有物理尺寸存在,但不可见
- 3、再给它还原成display为none,最后返回结果
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>获取display为none元素的物理尺寸解决方案
</title
>
</head
>
<body
>
<div
class="container" style
="display: none;">
<p
>前端技术
</p
>
<p
>前端技术
</p
>
<p
>前端技术
</p
>
</div
>
</body
>
<script
>
// 获取display为none元素的高度
function getSizeAttr
(elementSelector
,attrName
){
let oDiv
= document
.querySelector
(elementSelector
);
oDiv
.style
.cssText
= `visibility
:hidden`
let attr
= {
height
: oDiv
.offsetHeight
,
width
: oDiv
.offsetWidth
,
offsetLeft
: oDiv
.offsetLeft
,
offsetTop
: oDiv
.offsetTop
}
oDiv
.style
.cssText
= `display
:none`
;
return attr
[attrName
]
}
console
.log(getSizeAttr
('.container','width'))
console
.log(getSizeAttr
('.container','height'))
console
.log(getSizeAttr
('.container','offsetLeft'))
console
.log(getSizeAttr
('.container','offsetTop'))
</script>
</html
>
小结:利用先把所有隐藏元素变成可以获取物理尺寸,获取完毕再给它变成隐藏,再返回我们需求的物理尺寸是关键。
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - JS获取display为none的隐藏元素的宽度和高度的解决方案