window.innerHeight和document.documentElement.clientHeight区别

最新推荐文章于 2024-03-22 14:25:18 发布

weixin_30786617

最新推荐文章于 2024-03-22 14:25:18 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suihang/p/11177093.html

版权

今天有人问我这个问题，做了个小例子来记录一下子。

首先这两个都是获取可视区域的高度，那他们有什么区别呢

1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型

2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条

做了一个小示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        .box{
            height: 100%;
            width: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    console.log('innerHeight:'+ window.innerHeight)
    console.log('clientHeight:'+ document.documentElement.clientHeight)
</script>
       
</body>
</html>

此时运行打印结果：

innerHeight:760
clientHeight:760

可以看到没有横向滚动条时两者是相等的

现在我们将上面代码中box的宽度改为120%，使之出现横向滚动条

再看看结果

innerHeight:760
clientHeight:743

可以看到document.documentElement.clientHeight的高度少了一些，原因就是document.documentElement.clientHeight不包括横向滚动条

转载于:https://www.cnblogs.com/suihang/p/11177093.html

weixin_30786617

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
window.innerHeight和document.documentElement.clientHeight区别

今天有人问我这个问题，做了个小例子来记录一下子。首先这两个都是获取可视区域的高度，那他们有什么区别呢1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.cli...
复制链接

扫一扫