【JavaScript编程实操13】1.获取浏览器的宽度和高度 2.实时获得页面滚动高度

本文链接：https://blog.youkuaiyun.com/qq_45498824/article/details/137965526

本文通过两个JavaScript实操，讲解如何在DOM模型中获取浏览器的宽度和高度，包括window.innerWidth/innerHeight以及window.outerWidth/outerHeight的区别，并演示如何实时获取页面滚动高度，提供代码示例和总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本次主要是针对Javascript阶段的DOM模型的实操练习，共有2个实操，大家可以在实操的过程中更加深入地理解DOM模型中获取宽度和高度的的知识点。其中获取浏览的宽度和高度是DOM模型中获取浏览器的宽度和高度的常用方法，主要有window.innerWidth和window.innerHeight，也有其他方法来获取浏览器的宽度和高度，比如document.documentElement.clientWidth和document.documentElement.clientHeight。同时，DOM模型还提供了window.outerWidth和window.outerHeight，它们返回当前窗口的宽度和高度，包括滚动条。本次的实操分别是：1.获取浏览器的宽度和高度 2.实时获得页面滚动高度。

1、获取浏览器的宽度和高度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取浏览器的宽度和高度</title>
</head>
<body>
    <div>
        <p>浏览器的宽度：window.innerWidth</p>
        <p>浏览器的高度：window.innerHeight</p>
    </div>
    <script>
        //获取浏览器的宽度和高度
        //innerWidth：返回当前窗口的宽度，不包括滚动条
        //innerHeight：返回当前窗口的高度，不包括滚动条
        var width=window.innerWidth;
        var height = window.innerHeight;
        console.log("浏览器的宽度：" + width);
        console.log("浏览器的高度：" + height);
    </script>
</body>
</html>

实现效果：

2、实时获得页面滚动高度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时获得页面滚动高度</title>

    
</head>
<body>
    <div style="height: 2000px;background-color: #f0f0f0;">
        <p>获取页面滚动高度</p>
        <p>用height设置可以用来撑开页面的高度，使得页面滚动条出现。</p>
        <p>用window.pageYOffset、window.scrollY、document.documentElement.scrollTop、document.body.scrollTop获取页面滚动高度。</p>
    </div>
    <script>
        //window.onscroll：当页面滚动时触发的事件。
        //document.documentElement.scrollTop：返回页面垂直滚动的距离，即页面顶端到当前可见内容顶端的距离。
        //document.body.scrollTop：返回页面垂直滚动的距离，即页面顶端到当前可见内容顶端的距离。
        window.onscroll=function(){
            var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
            console.log("当前页面滚动高度："+scrollHeight);
        };
    </script>
</body>
</html>