$(window).height() 和 $(document).height()的区别

最新推荐文章于 2024-03-20 09:23:44 发布
转载 最新推荐文章于 2024-03-20 09:23:44 发布 · 484 阅读 · 0

本文详细解释了$(window).height()与$(document).height()的区别，前者表示当前浏览器窗口的可见高度，后者则是整个文档的高度。此外还介绍了如何通过$(document).scrollTop()等方法来判断页面是否滚动到了顶部或底部。

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

 

$(window).height() 和 $(document).height()的区别

$(window).height()代表了当前可见区域的大小，
$(document).height()则代表了整个文档的高度，可视具体情况使用.

当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
$(window).height() 随之改变，但是 $(document).height()是不变的。

 

粗糙的举例：

浏览器页面高度为1360px，$(window).height()最高为1360px，还可以调整页面窗口缩小页面高度值。

此时页面有1w行文本，占用了3万px像素，这时候$(document).height()是3万px，不管怎么调整页面窗口，这个值都是不变的。

 

============================

 

$(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)
$(document).scrollLeft() 这是获取水平滚动条的距离

 

要获取顶端 只需要获取到$(this).scrollTop()==0的时候 就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了

或者

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

也就是：

页面窗口高度+滚动的高度 = 文档文本高度

============================

注意：如果 $(window).height() 获取的不是窗口的高度而是文档文本高度，

也就是$(window).height()和$(document).height返回值一样

那就是因为DOCTYPE没写造成的。

请检查html标签，<html>改成<!DOCTYPE html>，就OK了。

 

浅谈DOCTYPE对$(window).height()取值的影响
09-01
_windowHeight = document.body.clientHeight; } else { //alert($(window).height()); _windowHeight = $(document).height(); }; ``` 这段代码首先检查文档高度是否大于窗口高度，如果是，则使用`document....
浅谈$(document)和$(window)的区别
09-03
`$(document).height()` 和 `$(window).height()` 返回的值不同。前者返回整个文档的高度，包括不可见的部分，比如滚动条下的内容；后者则返回浏览器当前可视区域的高度，即用户能看到的窗口高度。在有滚动条的情况...
$(window).height()
layman1024的博客
05-02 1099
$(window).height();           //浏览器当前窗口可视区域高度  $(document).height();         //浏览器当前窗口文档的高度  $(document.body).height();    //浏览器当前窗口文档body的高度
$(window).height()与$(document).height()
君子不卿
12-25 669
页面高度 $(document).height()的高度是大于窗口高度 $(window).height()获取当前 也就是你浏览器所能看到的页面的那部分的高度。
$(window).height()和$(document).height()
u012028371的博客
08-17 431
$(window).height()代表了当前可见区域的大小，而$(document).height()则代表了整个文档的高度，可视具体情况使用。 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。 $(document).scrollTop() 获取垂直滚动
$(window).height()获取到的高度不对
热门推荐
wuyou1336的博客
02-20 1万+
关于这个问题，网上有人说这是webkit内核的浏览器导致的，且只有这种浏览器会出现，只需要将html5的声明整成标准的带有的声明的就行了，但是本人亲测仍然是不行的，所用浏览器：Google Chrome  (64-bit)。 后来使用 var innerHeight = window.innerHeight; //window的高度，即手机的高度 var cli
JS检测window.open打开的窗口是否关闭
10-19
`height`和`width`参数定义了新窗口的尺寸。 接着，为了防止用户在新窗口打开期间进行其他操作，我们在父窗口上添加一个遮罩层。假设我们使用jQuery库，可以这样操作： ```javascript $("body", parent.document)....
$(document).ready(function() { fetchScroll(); page(); function page() { var windowWidth = $(window).width(), documentHeight = $(document).height(), windowHeight = $(window).height(); if (windowWidth < 1280) { $(".page").width(1280); } else { $(".page").width(windowWidth); } } $(window).resize(function() { page(); }); $(".j-btn-menu").on("click", function(e) { e.preventDefault(); $(".module").toggleClass("is-open"); var menu = $(this).data("menu"); $("#" + menu).slideToggle("fast"); }); $(".module").hover(function() { var $this = $(this); $this.find(".info-short").stop().css({ opacity:0 }, 500); $this.find(".info-full").stop().slideDown(); }, function() { var $this = $(this); $this.find(".info-full").stop().slideUp("fast"); $this.find(".info-short").stop().animate({ opacity:1 }, 500); }); });
03-23
这段代码是用来控制网页的自适应和菜单的开关。当页面加载完成后，会执行fetchScroll()和page()函数。page()函数会获取窗口的宽度、文档的高度和窗口的高度，并根据窗口宽度的大小来设置页面的宽度。当窗口大小改变...
$(window).height() 文档高度变化引起的上拉加载不正常
qq_43493613的博客
12-14 267
正常的上拉触底自动加载代码： $(window).scroll(function(){ var bottomsubmit = (′.morecase′).offset().top−('.morecase').offset().top-(′.morecase′).offset().top−(window).height(); var nowtop = KaTeX parse error: Expected '}', got 'EOF' at end of input: …page>allpages){(
使用$(window)[0].innerHeight 代替$(window).innerHeight()或$(window).height()
····
04-01 988
如下图所示，不知道为什么使用$(window).height()获取的数值与实际需要的数值不符合。 console.log($(window).height()); console.log($(window)[0].innerHeight); console.log($(window).innerHeight()); 按说这么小的窗口应该获取200+的px值。 但是不论怎么弄...
(document).height()与$(window).height()
weixin_34206899的博客
04-11 86
(document).height()与$(window).height()jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(do...
jQuery $(document).height()与$(window).height()区别
_江屿_
03-20 479
jQuery $(document).height()与$(window).height()区别
jquery获取窗口高度的方法
TinaTxt的博客
06-12 1564
$(window).height() 获取的是当前可视窗口的高度，也就是用户能看到的窗口的高度，是不变的（在窗口大小不变的前提下） $(document).height() 获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变当窗口滚动条滚到最低端时， $(document).height() == $(window).height() + $(window).scrollTop()
$(window).height()获取的高度是文档文本高度的原因
浅笑如伤的博客
11-12 1441
如果 $(window).height() 获取的不是窗口的高度而是文档文本高度， 也就是$(window).height()和$(document).height()返回值一样 一、可能是因为 &lt;!DOCTYPE html&gt; 没写造成的。 请检查html标签，&lt;html&gt;改成&lt;!DOCTYPE html&gt; 二、使用jquery版本与你&lt;!DOCT...
$(window).height()获取到的高度有误，与窗口高度不一致
song527002517的博客
11-04 716
这是由于页面没有标注<!DOCTYPE> 声明导致的， 只需要将html5标准的<!DOCTYPE> 声明添加到页面第一行就行了。 <!DOCTYPE html>
jquery $(window).height()和$(window).width()指的是什么
一步步进步的前端
01-09 2680
浏览器可视窗口的高度和宽度。
this.$refs.table.getBoundingClientRect();
最新发布
07-26
this.tableHeight = windowHeight - tableTop - paginationHeight; } } } ``` 在上述代码中，通过 `getBoundingClientRect()` 获取表格元素的 `top` 位置，并结合窗口高度和分页组件的高度，动态计算出表格的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值