时间戳

首页 > 解决方案 > 获取包含所有子元素高度的元素的高度

javascript - 获取包含所有子元素高度的元素的高度

问题描述

我搜索一个选项来获取元素的高度及其所有子元素的高度。

例子

我想知道带有内联滚动容器（https://simon-frey.eu/splashTest/container.html）的以下站点主体的完整高度：

<html><head>
<style>
        body,div{
            height: 100%;
            overflow: hidden;
            font-size: 3em;
        }
        div{
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div>

</body></html>

使用到目前为止我发现的选项，我只能得到身体的高度（100% 窗口高度）：

document.body.scrollHeight

document.body.clientHeight

getComputedStyle(document.body).height

如果窗口的高度为 1000 像素，其中的内容高度为 2000 像素，则所有这些选项都返回 1000 像素，而不是我想要的 2000 像素。

标签： javascripthtml

解决方案

那是因为您的<body>元素实际上没有滚动，但嵌套<div>的是，因为您已设置overflow: hidden为 body 但overflow-y: auto为<div>.

所以如果你想获取页面上所有内容的高度，那么你需要查询它<div>并访问它的scrollHeight属性。

console.log(document.querySelector('.scroller').scrollHeight);
<html><head>
<style>
        body,div.scroller{
            height: 100%;
            overflow: hidden;
            font-size: 3em;
        }
        div.scroller{
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="scroller">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div>

</body></html>

推荐阅读