1.显示器的分辨率
window.screen.width-----显示器的宽度 单位是p x
window.screen.height-----显示器的高度 单位是px
window.screen.availWidth-----显示器的可用宽度 是指浏览器窗口最大后,浏览器能撑开的宽度(滚动条也是浏览器的一部分),
其中任务栏不包括在内,即使将任务栏设置为自动隐藏
window.screen.availHeight-----显示器的可用高度 是指浏览器窗口最大后,浏览器能撑开的高度(滚动条也是浏览器的一部分),
其中任务栏不包括在内,即使将任务栏设置为自动隐藏
2.窗口的文档显示区
window.innerWidth-----窗口的当前宽度,其中包括滚动条 可以认为是窗口的可见宽度+滚动条 滚动条的宽高一般为17px
window.innerHeight-----窗口的当前高度,其中包括滚动条 可以认为是窗口的可见高度+滚动条 滚动条的宽高一般为17px
IE 8(包括)以下不兼容
3.窗口的可视区域
IE 7(包括)以上:
document.documentElement.clientWidth-----窗口的可视区域宽度,不包括滚动条
document.documentElement.clientHeight-----窗口的可视区域高度,不包括滚动条
IE 7(不包括)以下
document.body.clientWidth-----body的内容区宽度,不包括滚动条,不包括边框,不包括margin,但是包括padding
document.body.clientHeight-----body的内容区高度 ,不包括滚动条,不包括边框,不包括margin,但是包括padding
document.body以前是IE的私有属性,在IE7出现以前,用来获取可视区域大小的,后来各种浏览器也都开始支持该属性,但是还是存在问题的,比如
document.body是body元素,document.documentElement是html元素,在窗口缩小时,document.body.clientHeight一直都是body的真正宽度1104,而document.documentElement则能得到可视窗口的宽度。
这种bug在IE 7(包括)以上浏览器以及其他浏览器都存在
4.offsetWidth和offsetHeight元素自身宽高
document.documentElement.offsetWidth-----窗口(html)的自身宽度,不包括滚动条,不包括margin,但是包括padding,包括border
document.documentElement.offsetHeight-----窗口(html)的自身高度,不包括滚动条,不包括margin,但是包括padding,包括border
document.body.offsetWidth-----body的contentWidth+padding+border
document.body.offsetHeight-----body的contentHeight+padding+border;
可以理解为该元素边框包围的范围(包括边框)
5.页面的真正宽高
有时候元素的内容比元素本身宽,比本身高,scrollWidth&&scrollHeight是得到元素的实际宽高
document.documentElement.scrollWidth-----html的contentWidth+margin+border+padding
document.documentElement.scrollHeight-----html的contentHeight+margin+border+padding
6.offsetTop
本身外边框到父元素内边框的距离,各个浏览器计算方式差异很大
元素定位时,主要看元素的边框在哪里,边框的位置除了和定位的top,left等有关,还和margin有关
offsetTop是往上寻找祖先元素,第一个不是static定位的祖先元素就是该元素的offsetParent,offsetTop是本身元素的border到祖先元素的border距离。如果一直没有非static定位,则最后offsetParent是body元素
7.clientTop和clientLeft
clientTop-----border-top的值
clientLeft-----border-left的值
兼容性不行
8.scollTop和scrollLeft
scrollTop-----页面往上滚动的距离
scrollLeft-----页面往左滚动的距离
不应该使用document.documentElement.scrollTop,应该使用document.body.scrollTop代替
9.window.pageYOffset和window.pageXOffset
页面相对于窗口左上角的X和Y位置