页面

2011/11/03

CSS Object Model View

标签：,, 发帖者Scarecrow 时间：11/03/2011

这些兼容性表为所有的现代浏览器对W3C CSSOM 视图规范的细节支持。
兼容性表的关键字在文末。

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
  • IE 不支持这些属性。它用 document.documentElement 或 ducument.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。
outerWidth & outerHeight
整个浏览器窗口(包括标题栏、地址栏、书签栏和窗框等)的尺寸。【只读，无默认值】

Test page		 No Yes Yes Yes Yes Yes To be tested 
window.outerWidth
window.outerHeight
  • IE 不支持此对属性，且没有提供替代的属性。
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
  • Opera计算相对于浏览器窗口的具体的标签窗口的坐标。这是可以理解的，由于在Windows工作的方式，但严格来说这是错误的。它应该给出浏览器窗口相对于屏幕的坐标。（但我测试发现，无论浏览器窗口时全屏还是正常大小，其值都是0！）
  • IE、Chrome、Safari和 Opera 支持 screenLeft 和 screenTop； Firefox 8.0之前不支持 screenLeft 和 screenTop。
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
  • 当系统是32位时，FireFox 3.6 一直到FireFox 7.0.1 返回的仍是24。其他浏览器正常。
    There was something about Firefox being “really” right because of an alpha channel or something, but as long as all other browsers on the same computer report 32 I continue to see Firefox as the culprit here.
    Besides, these properties are only ever used in web browser statistics programs, and there people have grown used to the “32” even though they don’t understand what it means. Nobody ever uses it in the wild.
pixelDepth
与colorDepth属性基本上一样

Test page		 No Yes Yes Incorrect Yes Yes Yes To be tested 
screen.pixelDepth
pixelDepth和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.
  • Safari 4 and Opera 10.10 need pageX/Y.
This method is a godsend for drag and drop scripts. When the user drops the dragged element, figure out what element is located at the drop point and go on from there. No more complicated calculations necessary.
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处理的是正确，个别的矩形计算不正确。
  • FireFox 无法计算其元素的top/bottom坐标。
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.
  • IE5-7 returns far too many rectangles for the first test paragraphs. The correct number is 5 (for 5 lines), but IE5.5 returns 9 and IE6/7 14. IE8b2 gets this right.
  • Furthermore, IE5-7 also split up a block-level element such as a <p> into one rectangle per line. This is incorrect: a block-level element should be reported as one rectangle.
  • Finally, in IE 5-7 the rectangles are off by about two pixels. According to John Resig this is caused by the (invisible, but nonetheless present) borders of the <html> element.
  • Firefox doesn't round the top/bottom coordinates.
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.
  • iPhone上的Safari能正确处理Y坐标，X坐标它将滚动到页面的左边缘，当用户放大后很难使用。
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
  • 计算 offsetLeft 时，IE5-7 不将 position: relative 元素作为 offsetParents，而将到下一个定位元素作为offsetParent。但计算 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>
  • position 不是 static 的元素
  • <table>, <th> 或 <td>,但 x 必须要 position:static
<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。
  • 当元素没有滚动，IE中 scrollHeight 等于内容的实际高度，而不是元素的高度。 scrollWidth 是正确的（但在IE8中有5个像素关闭？）。
  • Opera 给出不正确的奇数值。经测试，Opera 11.50下已修复。
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是唯一取值正确的浏览器。
  • layerX/layerY:W3C特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点；如果有,将改变参考坐标系,从触发元素盒子模型的border box的左上角为参考点。也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就几乎相等,唯一不同就是一个从border为参考点,一个以padding为参考点。
  • 在IE7以及更低的浏览器下，只有当目标元素为 offsetParent 时才计算坐标值，否则，它就会拿目标元素的 offsetParent 来计算。

    Bug:当发现元素应用了 position:relative 后，IE会去寻找下一个 offsetParent 来计算 offsetY ，但计算 offsetX 不会。
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 浏览器会崩溃
原文链接：http://www.quirksmode.org/dom/w3c_cssom.html
订阅： 博文 (Atom)