JS获取display为none的隐藏元素的宽度和高度的解决方案
Posted studyshufei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS获取display为none的隐藏元素的宽度和高度的解决方案相关的知识，希望对你有一定的参考价值。
有时候，我们一进入页面，就需要获取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/
以上是关于JS获取display为none的隐藏元素的宽度和高度的解决方案的主要内容，如果未能解决你的问题，请参考以下文章
jQuery无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案
请问JS怎么获取隐藏div的高度，div设置为display=“none”。谢谢
js中display：none是显示为无，能隐藏的意思，为啥在js中再用display：block又可以让他显示出来呢？不