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

最新推荐文章于 2024-03-20 09:23:44 发布

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

本文详细解释了$(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了。

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34185364

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浅谈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

(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()返回值一样一、可能是因为 <!DOCTYPE html> 没写造成的。请检查html标签，<html>改成<!DOCTYPE html> 二、使用jquery版本与你<!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

在 Vue.js 中，可以通过 `this.$refs` 访问到 DOM 元素，并利用 `getBoundingClientRect()` 方法获取其位置信息。该方法返回一个 `DOMRect` 对象，包含了元素的 `top`、`right`、`bottom`、`left`、`width` 和 `height` 等属性，可用于获取元素相对于视口的位置[^1]。例如，可以通过以下方式获取 `this.$refs.table` 元素的位置信息： ```javascript mounted() { this.getTablePosition(); }, methods: { getTablePosition() { const tableElement = this.$refs.table; if (tableElement) { const rect = tableElement.getBoundingClientRect(); console.log('元素的位置信息:', { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left, width: rect.width, height: rect.height }); } } } ``` 在上述代码中，`getBoundingClientRect()` 返回的 `rect` 包含了元素的详细位置信息，包括其相对于视口的上、右、下、左边界距离以及宽度和高度。该方法通常在组件挂载后调用，以确保 DOM 元素已经渲染完成[^1]。需要注意的是，如果页面存在滚动或动态内容加载，建议在合适的生命周期钩子（如 `updated`）中再次调用 `getBoundingClientRect()`，以确保获取到最新的元素位置信息[^1]。 ### 获取元素位置信息的常见应用场景 1. **动态调整布局**：根据元素的位置信息，动态设置其样式或位置，实现响应式设计。 2. **滚动监听**：结合 `window.scroll` 事件，判断元素是否进入可视区域，从而实现懒加载或动画触发。 3. **定位弹窗或提示框**：通过获取目标元素的位置，动态计算弹窗或提示框的显示位置，使其始终跟随目标元素[^1]。 ### 示例：动态调整表格高度在 Vue 中，可以通过计算元素位置和窗口高度，动态设置表格的高度。例如： ```javascript methods: { setTableHeight() { const tableElement = this.$refs.table; const paginationExists = !!document.getElementsByClassName("el-pagination").length; const paginationHeight = paginationExists ? 55 : 0; if (tableElement) { const rect = tableElement.getBoundingClientRect(); const tableTop = rect.top; const windowHeight = window.innerHeight; this.tableHeight = windowHeight - tableTop - paginationHeight; } } } ``` 在上述代码中，通过 `getBoundingClientRect()` 获取表格元素的 `top` 位置，并结合窗口高度和分页组件的高度，动态计算出表格的高度，从而实现响应式布局。