一、Window视图属性
这些属性可以hold
住整个浏览器窗体大小。微软则将这些API称为“Screenview
接口”。包括:
innerWidth
属性和 innerHeight
属性
pageXOffset
属性和 pageYOffset
属性
screenX
属性和 screenY
属性
outerWidth
属性和 outerHeight
属性
1. innerWidth 属性和innerHeight 属性
window.innerWidth
window.innerHeight
浏览器内容区域的宽高,包括滚动条;
2. outerWidth属性和outerHeight属性
window.outerWidth
window.outerHeight
整个浏览器窗体的大小,包括任务栏、firebug
等
3. pageXOffset和pageYOffset
表示整个页面滚动的像素值(水平方向的和垂直方向的),滚出窗口的部分。
window.pageXOffset
window.pageYOffset
4. screenX and screenY
浏览器窗口在显示器中的位置,screenX
表示水平位置,screenY
表示垂直位置
window.screenX
window.screenY
注意:这儿说的浏览器窗口指的是里面内容部分,不包括收藏栏、状态栏等。
二、Screen视图属性
显示器信息相关的属性:
availWidth
和availHeight
colorDepth
pixelDepth
width
和height
这类API又被称为“Screen 接口”。相关兼容性与特性依次见下面内容:
1. screenX and screenY
显示器可用宽高,不包括任务栏之类的东东。
screen.availWidth
screen.availHeight
2. colorDepth
表示显示器的颜色深度
screen.colorDepth
一般的值是24
3. pixelDepth
该属性基本上与colorDepth一样,兼容性不一样。
screen.pixelDepth
4. width和height
表示显示器屏幕的宽高。其兼容性还是很不错的
screen.width
screen.height
三、文档视图(DocumentView)和元素视图(ElementView)方法
elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()
1. elementFromPoint()
返回给定坐标处所在的元素,兼容性较好。
2. getBoundingClientRect()
兼容性较好.
得到矩形元素的界线,返回的是一个对象,包含 top
, left
, right
, 和 bottom
四个属性值,大小都是相对于文档视图左上角计算而来。
四、元素视图属性
关于元素大小位置等信息的一些属性。有:
clientLeft
和clientTop
clientWidth
和clientHeight
offsetLeft
和offsetTop
offsetParent
offsetWidth
和offsetHeight
scrollLeft
和scrollTop
scrollWidth
和scrollHeight