有时候，我们一进入页面，就需要获取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>

获取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的隐藏元素的宽度和高度的解决方案的更多相关文章

  1. JS无法获取display为none的隐藏元素的宽度和高度的解决方案

    在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( ...

  2. jQuery获取display为none的隐藏元素的宽度和高度的解决方案

    1.利用给元素添加行内样式:visibility:hidden;display:block 2.让隐藏元素变成有物理尺寸存在,但不可见,获取元素宽高 3.再给它还原成display为none,去除vi ...

  3. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  4. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  5. box-sizing属性（指定针对元素的宽度与高度的计算方法）

    在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...

  6. 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度，高度】

    1.取值 $("#test").text()                                    //取id=test里面的文字 $("#test&qu ...

  7. js操作：selenium无法操作隐藏元素问题

    对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误, 隐藏的下拉菜单又没有办法避免,此帖只为交流隐藏元素自动化定位处理方法(3种操作)      ...

  8. js获取iframe和父级之间元素，方法、属，获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  9. 原生js获取display属性注意事项

    原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...

随机推荐

  1. Linux ACL对某一些文件有管理权限

    某些系统账号希望对某一些文件有管理权限,有三种方法: 1 加入属主所在的同一个组中,这等于扩大了访问其他文件的权限了. 2 加入other中,这样权限放开的更大了. 3 给文件的sudo权限. 4 采 ...

  2. FC红白机游戏列表（维基百科）

    1055个fc游戏列表 日文名 中文译名 英文版名 发行日期 发行商 ドンキーコング 大金刚 Donkey Kong 1983年7月15日 任天堂 ドンキーコングJR. 大金刚Jr. Donkey K ...

  3. GetParent、SetParent、MoveWindow - 获取、指定父窗口和移动窗口，IsChild - 判断两个窗口是不是父子关系

    提示: SetParent 应该 Windows.SetParent, 因为 TForm 的父类有同名方法. //声明: {获取父窗口句柄} GetParent(hWnd: HWND): HWND; ...

  4. Linux正则和grep命令

    设置命令的默认参数和别名 每次都要输入 ls -l ,烦不烦,我想用 ll 来表示 ls -l, 可以,只要在 ~/.bashrc 中加上 alias ll='ls -l' ,然后运行 source ...

  5. Codility--- Triangle

    Task description A zero-indexed array A consisting of N integers is given. A triplet (P, Q, R) is tr ...

  6. C++中的new,operator new与placement new

    以下是C++中的new,operator new与placement new进行了详细的说明介绍,需要的朋友可以过来参考下     new operator/delete operator就是new和 ...

  7. 基于ASP.NET的新闻管理系统（二）效果展示

    5. 新闻管理系统开发与实现 5.1前台新闻页面 主页面 新闻栏展示新闻 搜索新闻 菜单栏链接新闻 后台登录界面 大管理员后台管理界面 小管理员后台管理界面 修改密码 增加新闻界面 栏目管理界面   ...

  8. 一次信号量引发的tomcat异常退出

    近期在玩大数据.有个朋友找过来,说他线上的tomcat会莫名其妙的退出,表示非常苦恼,请我帮看看.每次他发现退出了,都通过腾讯云的WEB控制台登录,启动tomcat. 本着助人为乐(shao kao ...

  9. win2008环境mysql主从配置

    一.主库相关配置.设置 step1:主库配置文件 [mysqld] # 数据库id,唯一 server-id = 1# 二进制日志文件,必填项,否则不能同步数据;如果不取名字的话,会以计算机的名字加编 ...

  10. MySQL 事务嵌套

    MySQL默认自动提交(autocommit=1),如果要开启事务,先关闭自动提交(autocommit=0): InnoDB支持事务,MyISAM不支持: MySQL不支持事务嵌套:已经开启事务后, ...