js之可移植的查询窗口大小和位置

本文介绍了如何使用JavaScript获取屏幕左上角坐标、窗口内可视区域尺寸、滚动条位置以及文档尺寸等关键信息,涵盖了不同浏览器环境下的兼容性处理。

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

var Geometry = {};
if(window.screenLeft){ //IE and others
Geometry.getWindowX = function(){return window.screenLeft;};
Geometry.getWindowY = function(){return window.screenTop;};
}
else if{ //Firefox and others
Geometry.getWindowX = function(){return window.screenX;};
Geometry.getWindowY = function(){return window.screenY;};
}

if(windows.innerWidth){ //All browsers but IE
Geometry.getViewportWidth = function(){return windows.innerWidth;};
Geometry.getViewportHeight = function(){return windows.innerHeight ;};
Geometry.getHorizontalScroll = function(){return window.pageXOffset;};
Geometry.getVerticalScroll = function(){return window.pageYOffset;};
}
else if(document.documentElement && document.documentElement.clientWidth){
//These functions are for IE6 when there is a DOCTYPE
Geometry.getViewportWidth = function(){return document.documentElement.clientWidth};
Geometry.getViewportHeight = function(){return document.documentElement.clientHeight};
Geometry.getHorizontalScroll = function(){return document.documentElement.scrollLeft;};
Geometry.getVerticalScroll = function(){return document.documentElement.scrollTop;};
}
else if(document.body.clientWidth){
//These are for IE4,IE5,and IE6 without a DOCTYPE
Geometry.getViewportWidth = function(){return document.body.clientWidth};
Geometry.getViewportHeight = function(){return document.body.clientHeight};
Geometry.getHorizontalScroll = function(){return document.body.scrollLeft;};
Geometry.getVerticalScroll = function(){return document.body.scrollTop;};
}

//These functions return the size of the document.They are not window related,but they are 
//useful to have here anyway
if(document.documentElement && document.documentElement.scrollWidth){
Geometry.getDocumentWidth = function(){return document.documentElement.scrollWidth;};
Geometry.getDocumentHeight  = function(){return document.documentElement.scrollHeight;};
}
else if(document.body.scrollWidth){
//适用于IE4,IE5,and IE6 without a DOCTYPE,以及chrome,firefox等其他浏览器
Geometry.getDocumentWidth = function(){return document.body.scrollWidth;};
Geometry.getDocumentHeight  = function(){return document.body.scrollHeight;};
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值