WindowView 属性(整个浏览器窗体的属性)
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
innerWidth & innerHeight
浏览器窗体显示区的高度和宽度，以像素计。不包括菜单栏、工具栏以及滚动条等。【只读，无默认值】Test page |
No | Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
window.innerWidth window.innerHeight
|
||||||||||||||||||||||||
outerWidth & outerHeight
整个浏览器窗口(包括标题栏、地址栏、书签栏和窗框等)的尺寸。【只读，无默认值】Test page |
No | Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
window.outerWidth window.outerHeight
|
||||||||||||||||||||||||
pageXOffset & pageYOffset
整个页面滚动的像素值。【只读，无默认值】Test page |
No | Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
window.pageXOffset window.pageYOffset |
||||||||||||||||||||||||
screenX & screenY
浏览器窗口(左上角)在屏幕上的坐标，只读整数Test page |
No | Yes | Yes | Yes | Yes | Incorrect | To be tested | |||||||||||||||||
window.screenX window.screenY
|
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
ScreenView 属性(显示器信息的属性)
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
availWidth & availHeight
显示器可用尺寸，不包括操作系统任务栏Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
screen.availWidth screen.availHeight |
||||||||||||||||||||||||
width & height
显示器屏幕的尺寸，包括操作系统任务栏Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
screen.width screen.height |
||||||||||||||||||||||||
colorDepth
显示器的颜色深度(位)Test page |
Yes | Yes | Incorrect | Yes | Yes | Yes | To be tested | |||||||||||||||||
screen.colorDepth
|
||||||||||||||||||||||||
pixelDepth
与colorDepth属性基本上一样Test page |
No | Yes | Yes | Incorrect | Yes | Yes | Yes | To be tested | ||||||||||||||||
screen.pixelDepthpixelDepth和colorDepth的主要不同在于（不确定以前的是否也是这样？）：在Unix机器上，旧的X-客户端可能会允许应用程序定义自己的配色方案。如果是这样的话，colorDepth匹配应用程序的颜色深度，pixelDepth匹配显示器的颜色深度。在其他所有情况下，他们是相等的。 |
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
DocumentView 和 ElementView 方法
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
elementFromPoint()
返回给定坐标所在处的元素Test page |
Yes | Yes | Incorrect | Yes | Yes | Incorrect | Yes | To be tested | ||||||||||||||||
document.elementFromPoint(100,100)Which coordinates does elementFromPoint() need? The standard seems to be clientX/Y.
However, you need to temporarily hide the dragged object. By definition it's the topmost element on the requested coordinates, and we need to know what's underneath it. The basic trick is: releaseElement: function(e) { // called onmouseup
var evt = e || window.event;
draggedObject.style.display = 'none';
var receiver = document.elementFromPoint(evt.clientX,evt.clientY);
if (receiver.nodeType == 3) { // Opera
receiver = receiver.parentNode;
}
draggedObject.style.display = '';
Now receiver contains the element the user dropped the dragged element on. |
||||||||||||||||||||||||
getBoundingClientRect()
返回 矩形元素x距离文档左上角的上下左右值 的一个对象Test page |
Yes | Almost | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.getBoundingClientRect()返回矩形元素x距离文档左上角的上、下、左、右的值的一个对象。从本质上讲，浏览器计算所有的矩形（见下文 getClientRects()），并且getBoundingClientRect()将返回距离文档左上角的上、下、左、右的值。IE处理的是正确，个别的矩形计算不正确。
|
||||||||||||||||||||||||
getClientRects()
返回元素的几个矩形区域Test page |
Buggy | Yes | Almost | Yes | Yes | Yes | To be tested | |||||||||||||||||
x.getClientRects()Returns a list with Rectangle objects that contain the top, left, right,
and bottom (all relative to the top left of the viewport) of the rectangles
of element x.The trick here is, that an inline element such as an <em> contains one rectangle for every
inline box (line), and that all these rectangles are returned.
|
||||||||||||||||||||||||
scrollIntoView()
让元素滚动到可视区域（不属于规范的方法）。Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.scrollIntoView()Essentially element x behaves as if it's the target of an #hash: it scrolls
to the topmost, leftmost position allowed.
|
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
ElementView 属性（这些属性提供关于元素节点(HTML标签)尺寸的信息）
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
clientLeft & clientTop
内容区域的左上角相对于整个元素左上角的位置（包括边框）。Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.clientLeft x.clientTop |
||||||||||||||||||||||||
clientWidth & clientHeight
内容区域的宽度和高度，包括填充，但不包括滚动条和边框Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.clientWidth x.clientHeight |
||||||||||||||||||||||||
offsetLeft & offsetTop
相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值Test page |
Incorrect | Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
x.offsetLeft x.offsetTop
|
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
offsetParent
定位父元素（即用来计算上面 offsetLeft/Top 的元素）。Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.offsetParent当计算 x 的offsetParent时，浏览器沿着x的祖先DOM树移动，直到它遇到了以下元素之一。该元素变成 x 的 offsetParent。
<body> 元素没有 offsetParent。尽管<html>元素有时会进入offsetParent链，但从来没有作为<body>的offsetParent。在IE和Opera浏览器下， position:fixed 的元素没有offsetParent。 |
||||||||||||||||||||||||
offsetWidth & offsetHeight
整个元素的尺寸，包括边框Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.offsetWidth x.offsetHeight |
||||||||||||||||||||||||
scrollLeft & scrollTop
元素滚动的像素值。可读可写。Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.scrollLeft x.scrollTop x.scrollTop = 20 |
||||||||||||||||||||||||
scrollWidth & scrollHeight
整个内容区域尺寸，包括隐蔽的部分。（如果元素没有隐藏的内容，它应该是等于clientX/Y？） Test page |
Incorrect | Yes | Yes | Yes | Yes | Incorrect | Almost | To be tested | ||||||||||||||||
x.scrollWidth x.scrollHeight当你向下滚动滚动条时， scrollHeight = scrollTop + clientHeight。如果元素没有滚动时， scrollWidth/Height = clientWidth/Height。
|
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
Mouse position（计算鼠标的位置）
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
clientX & clientY
window 鼠标相对于window的坐标 Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
event.clientX event.clientY返回鼠标相对于 window的坐标 在iPhone上，这对值返回的值等同于 pageX/Y。
意思就是：在iPhone上, screen area = window area = document area。 |
||||||||||||||||||||||||
offsetX & offsetY
target
鼠标相对于 事件目标元素的padding box左上角的坐标 Test page |
Buggy | Yes | No | border box | border box | content box | To be tested | |||||||||||||||||
event.offsetX event.offsetY返回鼠标相对于该事件目标的坐标。 但究竟哪一点作为参考点呢？按规范说，参考点为 内容区域(padding box)（即内容和填充形成的框，不包括滚动条和边框）的左上角，如果有boder,可能出现负值。 IE8/9是唯一取值正确的浏览器。
|
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
pageX & pageY
document 返回鼠标相对于文档的坐标 Test page |
No | Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
event.pageX event.pageY返回鼠标相对于文档的坐标。大部分时间情况下，这是你想要的信息。为了在IE浏览器得到它，需要将 scrollLeft/scrollTop + clientX/Y。 |
||||||||||||||||||||||||
screenX & screenY
screen 返回鼠标相对于屏幕的坐标 Test page |
Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||||||||||
event.screenX event.screenY返回鼠标相对于屏幕的坐标。 在iPhone上，这是几乎等于 pageX/Y，但通常有1或2个像素的差异。
意思就是：在iPhone上, screen area = window area = document area。 |
||||||||||||||||||||||||
x & y
等于 clientX/Y Test page |
Yes | page X/Y | No | Yes | Yes | Yes | To be tested | |||||||||||||||||
没有人可以解释为什么当我们有了 clientX/Y，还需要 x/y |
||||||||||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x | |||||||
Mouse position 纠结表
clientX/clientY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
offsetX/offsetY： W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY： W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY： W3C- IE- Firefox+ Opera+ Safari+ chrome+
screenX/screenY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
x/y： W3C- IE+ Firefox- Opera+ Safari+ chrome+
兼容性表的关键字
| Yes | 完全支持且正确 |
| Almost | 支持完全且正确，除了一个小问题 |
| Incomplete | 正确的，但不完全支持 |
| Alternative | 以另一种方式支持 |
| Untestable | 取决于另一个是不支持的方法或属性 |
| Minimal | 勉强支持，但在实践中无法使用 |
| Incorrect | 返回不正确的对象或值，并成为严重可用 |
| Buggy | 没有的东西不应该做的 |
| No | 不支持 |
| Crash | 浏览器会崩溃 |
按钮按钮
