body的高度

浏览器各种高度宽度区别  

2011-04-14 11:10:11|  分类： javascript |字号 订阅

js获取元素位置 和 窗口高度，用来手动设定div高度

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.body.offsetWidth = document.body.offsetWidth + 加上Margin高
margin值指div跟div之间的距离，而padding是指div跟内容的距离
document.body.scrollHeight + document.body.scrollTop = document.body.clientWidth
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。

　　用Javascript获取指定页面元素的位置是一个非常常见的需求，本文介绍的函数能够准确返回

一个元素相对于整个文档左上角的坐标，即元素的 top 、left 的位置，而且能够兼容浏览器，相

信对新手非常有用。
function getElementPos(elementId) {
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none') {
  return false;
}     
var parent = null;
var pos = [];    
var box;    
if(el.getBoundingClientRect)    //IE
{         
   box = el.getBoundingClientRect();
   var scrollTop = Math.max(document.documentElement.scrollTop,

document.body.scrollTop);
   var scrollLeft = Math.max(document.documentElement.scrollLeft,

document.body.scrollLeft);
  return {x:box.left + scrollLeft, y:box.top + scrollTop};
}else if(document.getBoxObjectFor)    // gecko   
{
   box = document.getBoxObjectFor(el);
   var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
   var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
   pos = [box.x - borderLeft, box.y - borderTop];
} else    // safari & opera   
{
   pos = [el.offsetLeft, el.offsetTop];
   parent = el.offsetParent;    
   if (parent != el) {
    while (parent) {
     pos[0] += parent.offsetLeft;
     pos[1] += parent.offsetTop;
     parent = parent.offsetParent;
    }
   }  
   if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position

== 'absolute' )) {
    pos[0] -= document.body.offsetLeft;
    pos[1] -= document.body.offsetTop;        
   }   
}             
if (el.parentNode) {
   parent = el.parentNode;
} else {
   parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for

any scrolled ancestors
   pos[0] -= parent.scrollLeft;
   pos[1] -= parent.scrollTop;
   if (parent.parentNode) {
    parent = parent.parentNode;
   } else {
    parent = null;
   }
}
return {x:pos[0], y:pos[1]};
}

使用示例

var pos=getElementPos("divId");
alert("距左边距离"+ pos.x +",距上边距离"+pos.y);

h=window.screen.height;
y=window.screenTop;
ie=h-y;
alert(h + '-' + y + '=' + ie);