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在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 返回最终的参考父元素。 */