有时候，我们一进入页面，就需要获取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>PPT模板下载大全https://www.wode007.com
方案三：
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>
小结：
利用先把所有隐藏元素变成可以获取物理尺寸，获取完毕再给它变成隐藏，再返回我们需求的物理尺寸是关键。