有时候，我们一进入页面，就需要获取display为none元素的物理尺寸（宽高），或获取display为none元素的子元素的物理尺寸（宽高），本篇文章就如何解决以上问题给出自己的解决方案
获取display为none元素的子元素的物理尺寸
方案一思路：
1、利用给元素添加行内样式：display:block;position:absolute;z-index:-1000
2、让隐藏元素变成block同时利用定位带出可视区，再获取下面元素的物理尺寸后
3、再给它还原成display为none，最后返回结果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获获取display为none元素的子元素的物理尺寸 ：解决方案一</title> 6 </head> 7 <body> 8 <div class="wrap" style="display: none;"> 9 <ul> 10 <li> 11 <p>前端技术</p> 12 <p>前端技术</p> 13 <p>前端技术</p> 14 <p>前端技术</p> 15 <p>前端技术</p> 16 </li> 17 <li> 18 <p>前端技术</p> 19 <p>前端技术</p> 20 <p>前端技术</p> 21 <p>前端技术</p> 22 <p>前端技术</p> 23 <p>前端技术</p> 24 <p>前端技术</p> 25 <p>前端技术</p> 26 <p>前端技术</p> 27 </li> 28 <li> 29 <p>前端技术</p> 30 <p>前端技术</p> 31 <p>前端技术</p> 32 </li> 33 </ul> 34 </div> 35 </body> 36 <script> 37 38 // 获取display为none元素下的子元素的高度 39 function getHeight(parentSelector,childSelector){ 40 let wrap = document.querySelector(parentSelector); 41 let aLi = wrap.querySelectorAll(childSelector); 42 let arr = []; 43 wrap.style.cssText = `display:block;position:absolute;z-index:-1000;` 44 for (var i = 0; i < aLi.length; i++) { 45 arr.push(aLi[i].offsetHeight) 46 } 47 wrap.style.cssText = "display:none;" 48 return arr 49 } 50 console.log(getHeight('.wrap','li')) 51 </script> 52 </html>
方案二思路：不推荐
1、这个方法需要用户事件触发让隐藏元素显示出来
2、开启一个定时器，间隔判断隐藏元素是否显示了
3、如果显示了，清除定时器，拿到结果再去操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获获取display为none元素的子元素的物理尺寸 ：解决方案二</title> 6 </head> 7 <body> 8 <div class="wrap" style="display: none;"> 9 <ul> 10 <li> 11 <p>前端技术</p> 12 <p>前端技术</p> 13 <p>前端技术</p> 14 <p>前端技术</p> 15 <p>前端技术</p> 16 </li> 17 <li> 18 <p>前端技术</p> 19 <p>前端技术</p> 20 <p>前端技术</p> 21 <p>前端技术</p> 22 <p>前端技术</p> 23 <p>前端技术</p> 24 <p>前端技术</p> 25 <p>前端技术</p> 26 <p>前端技术</p> 27 </li> 28 <li> 29 <p>前端技术</p> 30 <p>前端技术</p> 31 <p>前端技术</p> 32 </li> 33 </ul> 34 </div> 35 36 <button class="btn">按钮</button> 37 </body> 38 <script> 39 40 // 获取display为none元素下的子元素的高度 41 42 let wrap = document.querySelector('.wrap'); 43 let aLi = wrap.querySelectorAll('li'); 44 let arr = []; 45 let timer=null; 46 timer = setInterval(function(){ 47 // 用户操作后 让隐藏隐藏元素显示了 则获取结果 清除定时器 48 if(wrap.offsetHeight > 0){ 49 for (var i = 0; i < aLi.length; i++) { 50 arr.push(aLi[i].offsetHeight) 51 } 52 clearInterval(timer) 53 54 console.log(arr) 55 } 56 },1000) 57 58 document.querySelector('.btn').onclick=function(){ 59 wrap.style.cssText = "display:block;" 60 } 61 </script> 62 </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, 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>
小结：利用先把所有隐藏元素变成可以获取物理尺寸，获取完毕再给它变成隐藏，再返回我们需求的物理尺寸是关键。
转自http://moxiaofei.com/2019/07/13/getsize/