$(document).height()与$(window).height()区别

最新推荐文章于 2024-03-20 09:23:44 发布
最新推荐文章于 2024-03-20 09:23:44 发布
阅读量2k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： JS/jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Randy_Shenyp/article/details/77716460
本文介绍了如何使用jQuery来获取网页的滚动距离及浏览器窗口的尺寸。详细解释了$(document).height()与$(window).height()的区别，以及如何利用$(document).scrollTop()来判断滚动条的位置。

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

1.$(document).height()代表整个文档(页面)的高度
$(window).height()则代表当前可见区域的大小
所以当浏览器窗口大小发生变化时，$(document).height()值不变，$(window).height()发生变化

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

当scrollTop()==0的时，滚动条到达顶端
当scrollTop()>=$(document).height()-$(window).height()时，滚动条到达底端

注：$(document).scrollTop()与$(window).scrollTop()效果相同，但$(window).scrollTop()被所有浏览器支持

浅谈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()`。 下面是一个简单的示例，演示如何获取并比较这两个高度： ```javascript $(document).ready(function() { var docHeight = $...
(document).height()与$(window).height()
aijue2015的博客
01-06 415
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。 $(document).sc...
$(document).height()获取文档的高度
jQuery,CSS,Asp.net及前端开放问题汇总
12-09 2564
通过《$(document).height()》获取文档的高度 需注意以下两点： 1.当$(document).height()放在head中时 获取的值与$(window).height() 值相同 即为文档可视区域的高度。 2.顾名思义 调用时需放在页面底部 页面加载完成后执行 此时的值才是正确的
$(window).height() 和 $(document).height()的区别
weixin_34185364的博客
11-28 485
  $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小，$(document).height()则代表了整个文档的高度，可视具体情况使用. 当浏览器窗口大小改变时(如最大化或拉大窗口后) ，$(window).height() 随之改变，但是 $(document).height()是不变的。...
$(document).height();文档高度
Alisa_vc的博客
09-08 655
$(document).height();//文档高度 $(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度 $(window).scrollTop();//是滚动条高度 和$(document).scrollTop()效果一样 但是$(window).scrollTop() 兼容性好 $(".footer").heig...
$(document).height()和$(window).height()区别
cc蒲公英的博客
09-20 2129
$(window).heigth()指 默认浏览器滚动区域的高度，而$(document).height()指整个文档内容的高度。 而且当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。 $(document).scrollTop() 获取垂直距离，即当前
全面解析jQuery中的$(window)与$(document)的用法区别
10-19
4. 在处理页面元素的尺寸和位置时，$(window)和$(document)有时候可以互换使用，因为它们都是与页面布局相关的对象。但具体选择哪一个，取决于你是否需要依赖于整个文档的内容或是仅与浏览器窗口相关的功能。 5. $...
$(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()函数会获取窗口的宽度、文档的高度和窗口的高度，并根据窗口宽度的大小来设置页面的宽度。...
$(document).height()、$(document).scrollTop()
QDY5945的博客
11-19 773
(document).height()、$(document).scrollTop()： jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).h...
$(document).height()与$(window).height()
FireBird_one的博客
05-31 1334
 $(window).height()代表了当前可见区域的大小，而$(document).height()则代表了整个文档的高度，可视具体情况使用.  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 随之改变，但是$(document).height()是不变的。 $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口...
(document).height()、$(document).scrollTop()
倾城一笑stu
09-20 1986
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变jQuery(document).height()是不变的。 $(document).scrollTop() 获
jQuery里面的$(window).height()和$(document).height()的区别
Eric_Tsai的专栏
06-22 3874
我们要知道，$(window).height(),获取的是窗口的可视区域的高度，而$(document).height();获取的是文档的高度。 所以当你改变窗口的时候，$(window).height()会随着窗口的改变而改变，但$(document).height()是不变的。 很多时候，我们要使元素居中，此时我们可以写一个插件命名为jQuery.center.js，jQuery.fn.c
$(document).height()与$(window).height()的区别
ynjustme的博客
12-26 919
这俩个概念对很多人来说都很模糊，包括之前的我，现在来说一说他们的区别：            $(window).height()代表了当前可见区域的大小;            $(document).height()则代表了整个文档的高度，可视具体情况使用.(个人理解就是：html里body里面的内容)   *注意：当浏览器窗口大小改变时(如最大化或拉大窗口后) $(wi
jQuery $(document).height()与$(window).height()区别
_江屿_
03-20 481
jQuery $(document).height()与$(window).height()区别
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` 位置，并结合窗口高度和分页组件的高度，动态计算出表格的高度，从而实现响应式布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值