原生js和jquery 获取文档高度

最新推荐文章于 2024-08-12 08:01:34 发布

闲人不梦卿

最新推荐文章于 2024-08-12 08:01:34 发布

阅读量2.5k

点赞数 2

分类专栏： js 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/atu1111/article/details/120893756

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生js和jquery 获取文档高度

一.原生js获取页面和浏览器高度和宽度

1.获取浏览器的高度和高度

工具栏高/宽度：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

  window.outerHeight ：浏览器高度(包含了工具栏高度)。
  window.outerWidth ：浏览器宽度(包含了工具栏宽度)。

以获取浏览器的高度为例：
1) window.outerHeight
在这里插入图片描述

2) window.innerHeight
在这里插入图片描述

2.获取页面的高度和高度

1) body.clientWidth ,body.clientHeight ：

  body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。 (由元素内容高度决定)
  body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。 (由元素内容宽度决定)

先引申一个知识点document.documentElement和document.body的区别

document代表的是整个文档(对于一个网页来说包括整个网页结构)，document.documentElement是整个文档节点树的根节点，在网页中即html标签；
document.body是整个文档DOM节点树里的body节点，网页中即为body标签元素

body元素的高度和宽度是由元素内容决定的，例如body中有一个元素box，高度是300px，则body的高度也是300px，但是html标签的高度是由浏览器决定的。

<!--
 * @Descripttion:
 * @version:
 * @Author: fengyang
 * @Date: 2021-07-05 15:19:49
 * @LastEditors: fengyang
 * @LastEditTime: 2021-10-21 21:20:28
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 300px;
            background-color: pink;
        }


    </style>

</head>

<body>
    <div class="box">

    </div>

    <script>

        console.log(document.documentElement .clientWidth, 'document.documentElement.clientWidth');
        console.log(document.documentElement .clientHeight, 'document.documentElement.clientHeight');
        console.log(document.body.clientWidth, 'document.body.clientWidth');
        console.log(document.body.clientHeight, 'document.body.clientHeight');
    </script>
</body>

</html>

在这里插入图片描述
再引申一个知识点，window.innerHeight和document.documentElement.clientHeight区别

1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条

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

在这里插入图片描述
现在我们将上面代码中box的宽度改为120%，使之出现横向滚动条，再看看结果：
横向滚动条高度 = window.innerHeight - document.documentElement.clientHeight

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .box{
            height: 100%;
            width: 120%;
            background-color: pink;
        }


    </style>

</head>

<body>
    <div class="box">

    </div>

    <script>

        console.log(document.documentElement .clientWidth, 'document.documentElement.clientWidth');
        console.log(document.documentElement .clientHeight, 'document.documentElement.clientHeight');
        console.log(window.innerHeight, 'window.innerHeight');
        console.log(window.innerWidth, 'window.innerWidth');

    </script>
</body>

</html>

二.jquery获取页面和浏览器高度和宽度

        $(document)：整个文档 $(document).height()等价于 document.documentElement.clientHeight
        $("body")：body === $(document.body) $("body").height() 等价于 (document.body.clientHeight
        $(window)：视口 等价于原生window.innerHeight  window.outerHeight
        注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 而$(document).height()是不变的 (由元素高度固定)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        div {
            height: 300px;
            width: 120%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        console.log($(window).outerHeight(), 'window.outerHeight');
        console.log($(window).innerHeight(), 'window.innerHeight');
        console.log($(window).height(), 'window.height');
        console.log($(document).height(), 'document.height');
        console.log($(document.body).height(), 'document.body.height');
        console.log($("body").height(), 'body.height');
    </script>

</body>