js、jQuery获取页面中的各种宽度和高度

秒速五厘米 2022-07-17 01:26 390阅读 0赞

在JavaScript和jQuery中，对获取各种高度和宽度都有定义方法和属性，下面我们主要来说明一下获取窗口和文档的高度（宽度与高度相同）。

## jQuery中的方法 ##

$(document).height();//整个网页的高度
        $(window).height();//浏览器可视窗口的高度
        $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

在上面这三个方法中，我们可以得到一个公式，当页面中的滚动条拉到最低点时：

$(document).height() == $(window).height() + $(window).scrollTop()

我写了个简单的测试测了一下这个公式：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>获取网页高度</title>
    <script src="../../plugs/jquery-2.2.3.min.js"></script>
    <style> .d1{ height:1200px; border:3px solid rgba(205,203,203,1.00); border-radius:10px; } #test1{ width:500px; height:300px; border:3px solid rgba(209,207,207,1.00); border-radius:10px; padding:3px; position:fixed; top:10px; left:10px height:10px; } </style>
    </head>
    <body>
    <div class="d1"></div>
    <div id="test1"></div>
    <script> $(function(){ setText(); $(window).resize(setText); $(window).scroll(setText); function setText(){ var dom = $("#test1"); dom.text(""); var dh = $(document).height(); var wd = $(window).height(); var sd = $(window).scrollTop(); var p1 = "整个网页的高度："+dh; var p2 ="可视窗口的高度："+wd; var p3 ="浏览器可是窗口的顶端距离网页顶端的距离："+sd; var p4 = "当网页滚动条拉到最下面时，网页的高度等于可是窗口的高度加上可视窗口顶端到网页顶端的距离： wd:"+wd+" sd:"+sd+" wd+sd:"+(wd+sd); var p11 = $('<p></p>').text(p1); var p12 = $('<p></p>').text(p2); var p13 = $('<p></p>').text(p3); var p14 = $('<p></p>').text(p4); dom.append(p11).append(p12).append(p13).append(p14); } }); </script>
    </body>
    </html>

效果如下：

滚动条在网页顶端时：  
![滚动条在顶端时][20160825150253479]

滚动条在最底部时：  
![滚动条在最底部时][20160825150410223]

当跳转浏览器大小时：  
![调整浏览器大小][20160825150726189]

从上面的例子中可以看出，当滚动条在网上最上面的时候，`$(window).scrollTop()`的值是0，它是一直变动的，当浏览器的大小被调整时，`$(window).height()`也将跟着变化，只有`$(document).height()`的值是始终不变的（如果是自适应网页调整浏览器大小时页面调整会导致页面高度改变）。

而且只有当滚动条在最底部时：`$(document).height() == $(window).height() + $(window).scrollTop()`这个等式才会成立。

下面在来做一个调整，将上面的那个例子中`class="d1"`的`div`的高度改为`120px`，这时整个网页的高度（也就是`$(document).height()`）肯定是没有浏览器高的，我们来看一下效果：

![改变div高度后的效果][div]

但是得到的结果显示网页的高度和浏览器的高度是一样的，所以我们可以得到一个结论，当网页的高度没有浏览器的高度高是，`$(document).height()`返回的结果与`$(window).height()`相同。

可以再验证一下上面这个结果，我么来调整一下浏览器的高度再来看效果：

![调整浏览器高度][20160825151725196]

调整高度以后可以看到网页的高度（`$(document).height()`）还是和浏览器的高度（`$(window).height()`）相等，所以我们得到的结论是正确的：  
**当网页高度不足浏览器高度时，`$(document).height()`返回的是`$(window).height()`的值**。

要得到网页的高度，最好不要使用`$("body").height()`和`$("html").height()`。

先来说`$("body").height()`，因为`body`是可以有`padding`、`border`、`margin`这几个属性的，如有设置了这几个属性，那么获取的网页高度就会比原本的网页高度小。再来说$`("html").height()`，在不同浏览器上获取的高度会略有不同，说白了就是浏览器存在兼容问题。

说到`border`和`padding`、`margin`，就要说到jQuery中的另外两个方法，`innerHeight()`和`outerHeight()`,这两个方法主要用于获取标签的高度，对`window`和`document`可以使用height()代替。

hieght()          //获取的是元素内容的高度 content
        innerHeight()     //获取的是元素内容高度加上内边距 content + padding
        outerHeight()     //获取的是元素内容高度加上内边距和边框 content + padding + border 
        outerHeight(true) //获取的是内容高度加上内边距、边框、外边距 content + padding + border + mar

**`innerHeight()`**  
![innerHeight()][innerHeight]  
       为匹配的元素集合中获取第一个元素的当前计算高度值,包括`padding`，但是不包括`border`。

**`outerHeight( [includeMargin ] )`**  
![outerHeight()][outerHeight]

获取元素集合中第一个元素的当前计算高度值,包括`padding`，`border`和选择性的`margin`。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

在.`outerHeight()`计算中总是包含`padding-top` ,`padding-bottom` 和 `border-top`，`border-bottom` ；如果`includeMargin`参数是`true`，那么`margin` (`top` 和 `bottom`)也会被包含。

## JavaScript中的各种高度 ##

在JavaScript中定义的各种高度和宽度都是各个对象的属性，下面我直接列出来，有兴趣的可以自己直接写在js里面测试一下就可以了。

document.body.clientHeight    网页可见区域高度（紧针对body，与$("body").height()的值相同）
          document.body.offsetHeight    网页可见区域高度（仅针对body，包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等）
          window.innerHeight 可视窗口的高度（与$(window).height()的值相同） //IE9+、Chrome、Firefox、Opera 以及 Safari
          document.body.scrollHeight    网页正文全高（与$(document).height()的值相同）
          document.body.scrollTop       网页中被卷去的高度（当前页面顶部与整个网页定的距离）
          window.screen.heitgh          整个屏幕的高度
          window.screen.availHeight     屏幕可用工作区域的高度
          window.outerHeight            整个浏览器的高度
    
         //宽度与高度相同，只需要将height改为width即可

如有错误请指正，谢谢！

[20160825150253479]: /images/20220717/473f74fcbee74d37bc2660a5c0e68214.png
[20160825150410223]: /images/20220717/27dd5cf7019b4b89b41f71ae1862b2af.png
[20160825150726189]: /images/20220717/02e3e599b879460e9797fac48e386877.png
[div]: /images/20220717/09202b45aac24a0cbdd4d98bccd45dd1.png
[20160825151725196]: /images/20220717/44de468d00bd4b27ace79e6c53a4d5ef.png
[innerHeight]: /images/20220717/940da9f4a6ce491b9e97d9cc719d67b0.png
[outerHeight]: /images/20220717/35a0fa5234894e86ab5d4969abfd9e8d.png