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