本文详细解析如何使用JavaScript获取屏幕尺寸、浏览器窗口可视区域大小以及元素的宽高和偏移位置。重点对比了Firefox、IE、Chrome等主流浏览器在滚动条计算和offsetParent定位上的差异，提供了处理IE6/7兼容性的具体代码方案，帮助开发者实现跨浏览器的精准布局计算。
以下是获取浏览器高度、窗口高度、元素尺寸及偏移属性的具体方法说明。
screen.width
screen.height
screen.availHeight //获取去除状态栏后的屏幕高度
screen.availWidth //获取去除状态栏后的屏幕高度获取屏幕与窗口尺寸
一、获取屏幕尺寸
二、获取浏览器窗口内容的尺寸
//高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
//宽度
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht
/ *
* window.innerHeight FF/CH 支持，获取窗口尺寸。
* document.documentElement.clientHeight IE/CH支持
* document.body.client 通过body元素获取内容的尺寸
* /滚动条兼容性与差异
三、滚动条支持的差异性
对于未进行任何滚动条更改的页面，Firefox和IE默认认为HTML元素具有滚动条属性，而body元素则不具备。
然而，Chrome浏览器认为body元素是具有滚动条属性的。
因此，为了确保兼容性，建议采用以下写法：
document.documentElement.scrollTop || document.body.scrollTop元素尺寸与偏移属性详解
四、获取元素的尺寸
elemnt.offsetWidth
elemnt.offsetHeight
// 仅IE5不支持，放心使用吧示意图说明：
* offsetWidth 用于获取元素的高度尺寸，其计算包含：width + padding[left,right] + border[left,right]
* offsetHeight 用于获取元素的宽度尺寸，其计算包含：height + padding[top,bottom] + bottom[top,bottom]
五、元素的偏移属性
element.offsetTop //获取元素与其偏移参考父元素顶部的间隔距离
element.offsetLeft //获取元素与其偏移参考父元素左边的间隔距离
element.offsetParent //获取当前元素的参考父元素* offsetTop 用于获取元素距其上一级偏移参考父元素顶部的距离，包含：margin[top] + top
* offsetLeft 用于获取元素距其上一级偏移参考父元素左边的距离，包含：margin[left] + left
offsetParent兼容性问题处理
* 需要注意的是，offsetParent在IE6/7与IE8/FF/CH中存在兼容性问题：
在FF/Chrome/IE8+ 中：
如果当前元素设置了定位，则偏移参考父元素是上一级最近的定位元素。
如果当前元素没有设置定位，则默认以body作为最终的参考父元素。
在IE6/7中：
无论元素是否设置定位，其偏移参考父元素均为上一级的直接父元素。
综上所述：
无论是FF/Chrome还是IE，最终的参考父元素均为body元素。因此，兼容的方法就是获取当前元素到body元素的偏移位置值。
兼容性写法示例
function getOffestValue(elem){
var Far = null;
var topValue = elem.offsetTop;
var leftValue = elem.offsetLeft;
var offsetFar = elem.offsetParent;
while(offsetFar){
alert(offsetFar.tagName)
topValue += offsetFar.offsetTop;
leftValue += offsetFar.offsetLeft;
Far = offsetFar;
offsetFar = offsetFar.offsetParent;
}
return {'top':topValue,'left':leftValue,'Far':Far}
}
/*
* top 当前元素距离body元素顶部的距离。
* left 当前元素距离body元素左侧的距离。
* Far 返回最终的参考父元素。
*/以上关于JavaScript获取浏览器高度、窗口高度、元素尺寸及偏移属性的方法分享完毕，希望能对大家有所帮助。