如下:
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 +rightding[left ]
* offsetHeight 可以取得元素的寬度尺寸,包括:height + padding[top,bottom] + bottom[top,bottom]
五、元素的偏移屬性
element.offsetTop //获取元素与其偏移参考父元素顶部的间隔距离 element.offsetLeft //获取元素与其偏移参考父元素左边的间隔距离 element.offsetParent //获取当前元素的参考父元素
距其上一級的偏移參考父元素頂部的距離。包括: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 返回最终的参考父元素。 */