js文档高度位置相关值获取

本文深入探讨了在不同浏览器中使用不同方法获取文档高度与滚动条位置的实现方式,包括W3C标准与非标准方法的对比,并提供了一套兼容多种浏览器的解决方案。
本人测试ie,FF,chrome用document.documentElement.clientHeight都能取得高度和jquery $(window).height();一样的值,
文档的高度document.body.clientHeight||document.documentElement.clientHeight,
文档滚动条位置document.body.scrollTop||document.documentElement.scrollTop
但没有定义W3C标准会有问题

var dd = document.body || document.documentElement;

var h1 = Math.max(dd.clientHeight,db.clientHeight);
var h2 = Math.max(dd.scrollHeight,db.scrollHeight);
var objH = Math.max(h1,h2);

 ===============测试总结==================

has w3c

chrome:document文档高度($(document).height())==document.body.clientHeight;

document.documentElement.scrollHeight==document.body.scrollHeight

可视高度($(window).height())==document.documentElement.clientHeight;

scrollTop==document.body.scrollTop

 

firefox:document文档高度==document.body.clientHeight;

document.documentElement.scrollHeight==document.body.scrollHeight

可视高度==document.documentElement.clientHeight;

scrollTop==document.documentElement.scrollTop;

 

ie:document文档高度==document.body.clientHeight;

document.documentElement.scrollHeight==document.body.scrollHeight

可视高度==document.documentElement.clientHeight;

scrollTop==document.documentElement.scrollTop;

 

no w3c

 

chrome:document文档高度($(document).height())!=document.body.clientHeight;

document文档高度==document.documentElement.clientHeight;

document.documentElement.scrollHeight==document.body.scrollHeight

可视高度($(window).height())==document.documentElement.clientHeight;等于文档高度

可视高度为document.body.clientHeight;

scrollTop==document.body.scrollTop

 

firefox:document文档高度($(document).height())!=document.body.clientHeight;

document文档高度==document.documentElement.clientHeight;

document.documentElement.scrollHeight==document.body.scrollHeight

可视高度($(window).height())==document.documentElement.clientHeight;等于文档高度

可视高度为document.body.clientHeight;

scrollTop==document.body.scrollTop

 

ie:document文档高度==document.body.scrollHeight;

可视高度==document.body.clientHeight;

document.documentElement.scrollHeight

document.documentElement.clientHeight==0

scrollTop==document.body.scrollTop

 

has w3c兼容

 

文档高(推荐scrollHeight,document.body.clientHeight || document.documentElement.clientHeight;)

--------------------------------------兼容ie firefox chrome--------------------------------

文档高document.documentElement.scrollHeight||document.body.scrollHeight;(注意)

可视高document.documentElement.clientHeight || document.body.clientHeight;

scrollTop==document.documentElement.scrollTop||document.body.scrollTop;

-------------------------------------------------------------------------------------------

no w3c兼容

 

文档高document.documentElement.clientHeight || document.body.scrollHeight;

可视高document.body.clientHeight

scrollTop==document.documentElement.scrollTop||document.body.scrollTop;

转载于:https://www.cnblogs.com/aim-at-is-the-tao-in/p/3398565.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值