有時候，我們一進入頁面，就需要獲取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, 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>
小結：利用先把所有隱藏元素變成可以獲取物理尺寸，獲取完畢再給它變成隱藏，再返回我們需求的物理尺寸是關鍵。
轉自http://moxiaofei.com/2019/07/13/getsize/