关注前端 | 前端博客
当前位置: JavaScript > JS获取display为none的隐藏元素的宽度和高度的解决方案

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

2019-07-13 分类:JavaScript 作者:管理员 阅读(389)

有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案。

获取display为none元素的子元素的物理尺寸

方案一思路:
  • 1、利用给元素添加行内样式:display:block;position:absolute;z-index:-1000
  • 2、让隐藏元素变成block同时利用定位带出可视区,再获取下面元素的物理尺寸后
  • 3、再给它还原成display为none,最后返回结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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、如果显示了,清除定时器,拿到结果再去操作
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    <!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,最后返回结果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!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>

    小结:利用先把所有隐藏元素变成可以获取物理尺寸,获取完毕再给它变成隐藏,再返回我们需求的物理尺寸是关键。

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞(10) 打赏

    感谢您让我添加个鸡腿!

    支付宝
    微信
    10

    感谢您让我添加个鸡腿!

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    共有 0 条评论 - JS获取display为none的隐藏元素的宽度和高度的解决方案

    博客简介

    一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

    精彩评论

    服务热线:
     177****6038

     QQ在线交流

     旺旺在线