CSSOM视图模式(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。
以下就是一些API属性的相关内容,包括兼容性,使用,测试等。
一、Window视图属性
这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括:innerWidth
属性和 innerHeight
属性pageXOffset
属性和 pageYOffset
属性screenX
属性和 screenY
属性outerWidth
属性和 outerHeight
属性
相关属性组对应的兼容性以及使用见下面。
1. innerWidth 属性和innerHeight 属性
例如innerWidth
表示获取window窗体的内部宽度,不包括用户界面元素,比如窗框。
使用如下示例代码:
window.innerWidth
window.innerHeight
对于支持该属性的浏览器 弹出的就是类似下面的结果:
innerWidth
和innerHeight
属性只读,没有默认值。
2. outerWidth属性和outerHeight属性
outerWidth/outerHeight
表示整个浏览器窗体的大小,包括任务栏等。
window.outerWidth
window.outerHeight
对于支持该属性的浏览器 弹出的就是类似下面的结果:
outerWidth
和outerHeight
属性只读,没有默认值。
3. pageXOffset和pageYOffset
表示整个页面滚动的像素值(水平方向的和垂直方向的)。
window.pageXOffset
window.pageYOffset
pageXOffset和pageYOffset属性只读,没有默认值。
4. screenX and screenY
浏览器窗口在显示器中的位置,screenX
表示水平位置,screenY
表示垂直位置。
window.screenX
window.screenY
一般浏览器全屏状态下,这两个值都是0,如果窗口化浏览器并拖动,就能发现这两个值的变化了。
二、文档视图(DocumentView)和元素视图(ElementView)方法
elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()
1. elementFromPoint()
返回给定坐标处所在的元素。是个在目前而言,兼容性不错的方法,见下表:
document.elementFromPoint(100,100)
通过这个方法,可以拿到在相对页面左上角(100, 100)
坐标处的页面元素。
2. getBoundingClientRect()
得到矩形元素的界线,返回的是一个对象,包含 top
, left
, right
, 和 bottom
四个属性值,大小都是相对于文档视图左上角计算而来。返回内容类似于:
{
top: 143,
right: 1196,
bottom: 164,
left: 889
}
兼容性如下:
3. getClientRects()
这个方法与上面的方法相近,只不过返回的是一个数组,数组中每个对象与上面方法类似。返回元素的数个矩形区域,返回的结果是个对象列表,具有数组特性。这里的矩形选区只针对inline box,因此,只针对a, span, em
这类标签元素,兼容性
对于按照规范来走的浏览器,点击demo页面右半区域的文字部分,就会弹出一些文字(显示的个数就是文字的行数),例如,我的浏览器下就显示“2个矩形”,如
getClientRects()
方法是跟着line box模型走的,其返回的每个矩形区域其实就是一个line boxes,也就是一行文字内容。
也就是说,例如一段文字在一个span
标签下,如果这个span
标签内的文字有两行,则getClientRects()
返回的就是含有两个Rect对象的列表;如果文字是三行就三个。
getClientRects和getBoundingClientRect差异
getClientRects
返回的其实是个数组,数组中有很多个类似getBoundingClientRect
返回的对象。getBoundingClientRect
返回的永远是最外框框的那个矩形区域相关的坐标偏移对象;而getClientRects
是多行文字区域的坐标偏移集合,在非IE浏览器下,只对inline水平的标签有反应。
一般getBoundingClientRect
方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。
4. scrollIntoView()
让元素滚动到可视区域(不属于草案方法)。兼容性如下:
document.getElementById("index").scrollIntoView();
这样伴随浏览器的滚动,可以让原本处于当前可视区域外的id="index"元素回到可视区域中
此方法的兼容性甚是不错。这为我们实现元素的锚点跳转功能又敞开了另外一条途径。
三、元素视图属性
关于元素大小位置等信息的一些属性。有:clientLeft
和clientTop
clientWidth
和clientHeight
offsetLeft
和offsetTop
offsetParent
offsetWidth
和offsetHeight
scrollLeft
和scrollTop
scrollWidth
和scrollHeight
1. clientLeft和clientTop
表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。其兼容性不错,如下:
这个属性我自己测试发现,返回的就是元素border的距离,clientLeft=border-left,clientTop=border-top
2. clientWidth和clientHeight
表示内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条。对于inline的元素这个属性一直是0,单位px,只读元素。兼容性跟上面一样:
3. offsetLeft和offsetTop
表示相对于最近的祖先定位元素(CSS position 属性被设置为 relative
、absolute
或 fixed
的元素)的左右偏移值。兼容性如下表:
4. offsetParent
第一个祖定位元素(即用来计算上面的offsetLeft
和offsetTop
的元素)
offsetParent
元素只可能是下面这几种情况:
<body>
position
不是static
的元素<table>
,<th>
或<td>
,但必须要position: static
。
body
元素为定位元素的终极boss,所以其上头就没有其他定位元素了。也就是说body
元素没有offsetParent
(尽管有时候html
进入offsetParent
链)。
另外,在IE和Opera浏览器下,position: fixed
的元素没有offsetParent
。
5. offsetWidth和offsetHeight
整个元素的尺寸(包括边框)。包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
6. scrollLeft和scrollTop
表示元素滚动的像素大小。代表在有滚动条时,滚动条向下,向左滚动的距离也就是元素被遮住部分的距离。在没有滚动条时scrollTop==0,scrollLeft==0恒成立。单位px,可读可设置。
element.scrollLeft
element.scrollTop
element.scrollTop = 20
7.scrollWidth和scrollHeight
表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth
和clientHeight
。当你向下滚动滚动条的时候,scrollHeight
应该等用于scrollTop + clientHeight
。
scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。
兼容性有点微妙: