如何使用 JavaScript 获取整个文档的高度?

2023-12-01

有些文档我无法获取文档的高度(将某些内容绝对放置在最底部)。此外,填充底部似乎在这些页面上没有任何作用,但在高度将返回的页面上起作用。相关案例:

http://fandango.com
http://paperbackswap.com

方丹戈
jQuery 的$(document).height();返回正确的值
document.height返回 0
document.body.scrollHeight返回 0

平装本交换:
jQuery 的$(document).height();类型错误:$(document) is null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意:我有浏览器级别的权限,如果有一些技巧的话。


文档大小是浏览器兼容性的噩梦,因为尽管所有浏览器都公开 clientHeight 和scrollHeight 属性,但它们并不都同意这些值的计算方式。

对于如何测试正确的高度/宽度,曾经有一个复杂的最佳实践公式。这涉及使用 document.documentElement 属性(如果可用)或依赖文档属性等。

获取正确高度的最简单方法是获取在文档或文档元素上找到的所有高度值,并使用最高的高度值。这基本上就是 jQuery 的作用:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

使用 Firebug + 进行快速测试jQuery 书签返回两个引用页面的正确高度,代码示例也是如此。

请注意,在文档准备好之前测试文档的高度将始终导致 0。此外,如果您加载更多内容,或者用户调整窗口大小,您可能需要重新测试。使用onload or a 文件准备好如果您在加载时需要它,则事件,否则只需在需要数字时进行测试。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 JavaScript 获取整个文档的高度? 的相关文章

随机推荐