一、window view properties(窗口属性)
innerWidth 和 innerHeight
outerWidth 和 outerHeight
pageXOffset 和 pageYOffset
screenX 和 screenY
1、innerWidth和innerHeight window内部的宽度和高度,不包括菜单栏、工具栏以及滚动条等的宽度和高度 是只可读取属性 没有默认值 在不支持该属性的情况下输出undefined
window.innerWidth;
window.innerHeight;
浏览器兼容性如下:
2、outerWidth 和 outerHeight window整体的宽度和高度,包括菜单栏、工具栏以及滚动条等的宽度和高度 是只可读取属性 没有默认值 在不支持该属性的情况下输出undefined
window.outerWidth;
window.outerHeight;
浏览器兼容性如下:
3、pageXOffset 和 pageYOffset 当前页面相对于窗口显示区左上角的 X 位置、Y位置 是只可读取属性 没有默认值 在不支持该属性的情况下输出undefined
window.pageXOffset;
window.pageYOffset;
浏览器兼容性如下:
4、screenX 和 screenY 当前窗口相对于屏幕左上角的 X 位置、Y位置 在事件中, 当作为window属性的时候,是只读的,在不支持该属性的情况下输出undefined,在旧版本opera浏览器下无论窗口是全屏显示还是窗口缩小,显示出的结果都是0
window.screenX;
window.screenY;
浏览器兼容性如下:
partial interface Window {
....
// viewport
readonly attribute double innerWidth;
readonly attribute double innerHeight;
// viewport scrolling
readonly attribute double scrollX;
readonly attribute double pageXOffset;
readonly attribute double scrollY;
readonly attribute double pageYOffset;
void scroll(double x, double y, optional ScrollOptions options);
void scrollTo(double x, double y, optional ScrollOptions options);
void scrollBy(double x, double y, optional ScrollOptions options);
// client
readonly attribute double screenX;
readonly attribute double screenY;
readonly attribute double outerWidth;
readonly attribute double outerHeight;
readonly attribute double devicePixelRatio;
};
二、screen view properties(显示器属性)
width 和 height
availWidth 和 availHeight
colorDepth
pixelDepth
1、width 和 height 显示器屏幕的宽度和高度 只可读取属性 没有默认值
screen.width;
screen.height;
浏览器兼容性如下:
、
2、availWidth 和 availHeight 显示器屏幕除去windows任务栏后的宽度和高度 只可读取属性 没有默认值
screen.availWidth ;
screen.availHeight ;
3、colorDepth 显示器调色板的比特深度(颜色深度) 只可读取属性 w3c上规定返回值为24 (The colorDepth attribute must return 24) 不过ie8以下版本虽然支持该属性 不过返回值是32
screen.availWidth ;
screen.availHeight ;
浏览器支持性:
4、pixelDepth 显示器调色板的比特深度(颜色深度) 只可读取属性 w3c上规定返回值为24 (The pixelDepth attribute must return 24) 没有默认值 在不支持该属性的情况下输出undefined
screen.availWidth ;
screen.availHeight ;
浏览器支持性:
interface Screen {
readonly attribute double availWidth;
readonly attribute double availHeight;
readonly attribute double width;
readonly attribute double height;
readonly attribute unsigned long colorDepth;
readonly attribute unsigned long pixelDepth;
};
三、document view methods(文档视图方法)
elementFromPoint()
1、elementFromPoint() 返回给定坐标所在的元素
document.elementFromPoint(300, 200);
虽然大部分浏览器支持,不过IE9+以及其他浏览器返回的是一段html代码,而ie8以及以下返回的是[object Object]
partial interface Document {
Element? elementFromPoint(double x, double y);
sequence<Element> elementsFromPoint(double x, double y);
CaretPosition? caretPositionFromPoint(double x, double y);
};
四、element view properties(元素视图属性)
clientWidth 和 clientHeight
clientLeft 和 clientTop
offsetWidth 和 offsetHeigh
offsetLeft 和 offsetTop
offsetParent
scrollWidth 和 scrollHeigh
scrollLeft 和 scrollTop
1、clientWidth 和 clientHeight 元素可见的宽度和高度 (不包含边框和滚动条,但包含padding)
document.getElementById('content').clientWidth;
document.getElementById('content').clientHeight;
浏览器支持性:
2、clientLeft 和 clientTop 元素内容(不包含边框和滚动条,但包含padding) 相对于元素左上角的宽度和高度
document.getElementById('content').clientLeft;
document.getElementById('content').clientTop;
浏览器支持性:
3、offsetWidth 和 offsetHeight 元素的宽度和高度(包含边框和padding)
document.getElementById('content').offsetWidth;
document.getElementById('content').offsetHeight;
浏览器支持性:
4、offsetLeft 和 offsetTop 相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值
document.getElementById('content').offsetLeft;
document.getElementById('content').offsetTop;
浏览器支持性:
5、offsetParent 第一个祖先定位元素(即用来计算offsetLeft和offsetTop的元素)
document.getElementById('document-main').offsetParent
浏览器支持性:
6、scrollWidth 和 scrollHeight 元素的滚动条宽度和高度(包括隐藏的部分),如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight
document.getElementById('content').scrollWidth;
document.getElementById('content').scrollHeight;
浏览器支持性:
7、scrollLeft 和 scrollTop 元素滚动的坐标值 可读写
document.getElementById('content').scrollLeft;
document.getElementById('content').scrollTop;
浏览器支持性:
partial interface Element {
....
attribute (double or ScrollOptionsVertical) scrollTop;
attribute (double or ScrollOptionsHorizontal) scrollLeft;
readonly attribute double scrollWidth;
readonly attribute double scrollHeight;
readonly attribute double clientTop;
readonly attribute double clientLeft;
readonly attribute double clientWidth;
readonly attribute double clientHeight;
};
partial interface HTMLElement {
readonly attribute Element? offsetParent;
readonly attribute double offsetTop;
readonly attribute double offsetLeft;
readonly attribute double offsetWidth;
readonly attribute double offsetHeight;
};
五、element view methods(元素视图方法)
getClientRects()
getBoundingClientRect()
scrollIntoView()
1、getClientRects() 元素占据页面的所有矩形区域 返回值为数组 inline box时有多少行即数组长度 其他的则是长度为1 数组中则是TextRectangle 对象 :width、height、left、top、right、bottom
document.getElementById('head').getClientRects()
浏览器支持性:
IE6/7下的bug
getClientRects()方法是跟着line box模型走的,其返回的每个矩形区域其实就是一个line boxes,也就是一行文字内容。但是在IE6/7下把针对inline水平标签的方法应用到block水平的标签上了,如果block标签下则是返回文字的行数,而inline标签则返回文字字数
2、getBoundingClientRect() 元素相对浏览器视窗的左,上,右和下位置,返回的是一个对象:width、height、left、top、right、bottom
document.getElementById('head').getBoundingClientRect()
浏览器支持性:
3、scrollIntoView() 让元素滚动到可视区域
document.getElementById('head').scrollIntoView()
浏览器支持性:
partial interface Element {
DOMRectList getClientRects();
DOMRect getBoundingClientRect();
void scrollIntoView();
void scrollIntoView(boolean top, optional ScrollOptions options);
……
};
六、mouse position(鼠标位置)
screenX 和 screenY
pageX 和 pageY
clientX 和 clientY
x 和 y
offsetX 和 offsetY
1、screenX和screenY 鼠标相对屏幕显示器所在的位置
event.screenX;
event.screenY;
浏览器支持性:
2、pageX和pageY 鼠标相对文档页面所在的位置 对于支持的浏览器,返回的就是由鼠标点击位置决定的数值,对于不支持的浏览器,得到的是undefined
event.pageX;
event.pageY;
浏览器支持性:
3、clientX和clientY 鼠标相对于窗口的左上偏移值
event.clientX;
event.clientY;
浏览器支持性:
4、x 和 y 鼠标相对于文档的左上偏移值
event.x;
event.y;
浏览器支持性:
5、offsetX 和 offsetY 鼠标相对于当前被点击元素的左上偏移值 在IE7以及以下浏览器下,只有当当前目标元素为offsetParent时才计算坐标值,否则,它就会拿当前目标元素的offsetParent来计算,当发现元素应用了position: relative后,IE会去寻找下一个offsetParent来计算offsetY,但又不是offsetX
event.offsetX;
event.offsetY;
浏览器支持性:
partial interface MouseEvent {
readonly attribute double screenX;
readonly attribute double screenY;
readonly attribute double pageX;
readonly attribute double pageY;
readonly attribute double clientX;
readonly attribute double clientY;
readonly attribute double x;
readonly attribute double y;
readonly attribute double offsetX;
readonly attribute double offsetY;
};
参考文献: http://www.w3.org/TR/2013/WD-cssom-view-20131217/
http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/