CSSOM视图模式(CSSOM View Module)
一.Window视图属性(window对象)
这些属性可以获取住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”
innerWidth 属性和 innerHeight 属性
pageXOffset 属性和 pageYOffset 属性
screenX 属性和 screenY 属性
outerWidth 属性和 outerHeight 属性
1.innerWidth 属性和 innerHeight 属性
描述:innerWidth表示获取window窗体的内部宽度,不包括用户界面元素,浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)
兼容:现代浏览器获取的值相同,IE6/7/8是undefined无法获取值,以1920*1080分辩率测试(有收藏栏),chrome为1920*965,IE9以上1920*965,firefox:1920*955
方法:window.innerWidth;window.innerHeight;
//使用innerWidth和innerHeight来获取可视区的宽高,IE则使用clientWidth与clientHeight
function getViewPort(){ var pageWidth = 0; var pageHeight = 0; if(!window.innerWidth){ pageWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth; pageHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight; }else{ pageWidth = window.innerWidth; pageHeight = window.innerHeight; } return{width:pageWidth,height:pageHeight}; }
2.outerWidth 属性和 outerHeight 属性
描述:outerWidth/outerHeight表示整个浏览器窗体的大小,包括所有界面元素(如工具栏/滚动条)
兼容:现代浏览器获取的值略有些不同,以1920*1080分辩率测试(显示器任务栏在底部),chrome为1920*1050,IE9以上1936*1066,IE6/7/8是undefined无法获取值,firefox*1936*1066
方法:window.outerWidth;window.outerHeight;
3. pageXOffset 属性和pageYOffset 属性
描述:返回当前页面相对于窗口显示区位置,表示整个页面滚动的像素值(水平方向的和垂直方向的)
兼容:所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。
方法:window.pageXOffset;window.pageYOffset;
4.screenX 属性和 screenY 属性
描述:浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置
兼容:所有主要浏览器都支持screenX和screenY属性。(chrome:从0,0开始,firefox是-8,-8开始)注意: IE 8 及 更早 IE 版本不支持该属性,IE低版本浏览器使用"window.screenLeft" 和 "window.screenTop"可获得相同的值
方法:window.screenX;window.screenY;
二、Screen视图属性(screen对象)
指能获取显示器信息的些属性。这类API又被称为“Screen 接口”。
availWidth 属性和 availHeight属性
colorDepth属性
pixelDepth属性
width 属性和 height 属性
1.availWidth 属性和 availHeight属性
描述:返回访问者显示器屏幕可用宽高,不包括任务栏
兼容:兼容性相当高:以1920*1080分辩率测试(显示器任务栏在底部,所有要减去任务栏40px),chrome,IE,firefox的(screen.availWidth和screen.availHieght)都是返回1920*1050
方法:screen.availWidth;screen.availHeight;
2.colorDepth属性()
表示显示器的颜色深度
兼容:主浏览器都支持返回24,IE6/7/8返回32
方法:screen.colorDepth;
3.pixelDepth属性 与colorDepth属性一样,但IE6/7/8不支持
4.width 属性和 height 属性
描述:表示显示器屏幕的宽高
兼容:所有主要浏览器都支持,以1920*1080分辩率测试,chrome,IE,firefox全部返回1920*1080
方法:screen.width;screen.height;
三、文档视图(DocumentView)和元素视图(ElementView)方法
四个方法
elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()
1.elementFromPoint()
描述:返回给定坐标处所在的元素。
兼容:不过位置坐标不太一样,浏览器还是有差异的
方法:document.elementFromPoint(100,100);
2.getBoundingClientRect()
描述:得到矩形元素的界线,返回的是一个对象,包含 top, left, right, 和 bottom四个属性值,大小都是相对于文档视图左上角计算而来
兼容:所有主要浏览器都支持
方法:element.getBoundingClientRect();
一般getBoundingClientRect方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。所以,你想用js获取元素的高宽尺寸,就可以试试getBoundingClientRect方法了。
3.getClientRects()
返回元素的数个矩形区域,返回的结果是个对象列表,具有数组特性。这里的矩形选区只针对inline box,因此,只针对a, span, em这类标签元素
兼容:IE6/7有bug,其他支持
4.scrollIntoView()
描述:让元素滚动到可视区域(不属于草案方法),类似锚点跳转功能页面定位
兼容:所有浏览器都兼容
方法:element.scrollIntoView();
四、元素视图属性(Element)
关于元素大小位置等信息的一些属性。有:
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight
1. clientLeft 属性和 clientTop 属性
描述:表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。其兼容性不错,
兼容:所有浏览器都支持,但当元素是按钮button标签时:IE浏览器下,弹出的大小为3,在Chrome浏览器及FireFox浏览器下则是2,这是IE浏览器的按钮button标签在我的系统下的有3像素大小的边框值,而Chrome,FireFox的边框大小只有2像素。
方法:object.clientLeft;object.clientTop
2. clientWidth 属性和 clientHeight 属性
描述:表示内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条
兼容:所有浏览器都兼容,以1920*1080分辩率测试(最外层设度高为width:100%;height:100%;),现代浏览器有滚动条的情况下是宽度1903,IE6/7/8是1899,无滚动条宽度是1920
方法:object.clientWidth;object.clientHeight;
3. offsetLeft和offsetTop
描述:表示相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值
兼容:所有浏览器都兼容
4. offsetParent
描述:第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)
兼容:所有浏览器都兼容
5. offsetWidth和offsetHeight
描述:整个元素的尺寸(包括边框)
兼容:所有浏览器都兼容
6. scrollLeft和scrollTop
描述:表示元素滚动的像素大小。可读可写。
兼容:所有浏览器都兼容
7.scrollWidth和scrollHeight
描述:表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight。
兼容:不理想
五、鼠标位置(event对象)
与鼠标事件(例如普通的单击)相关的些属性。有:
clientX 属性和 clientY属性
offsetX 属性和 offsetY属性
pageX 属性和 pageY属性
screenX 属性和 screenY属性
x 属性和 y属性
1.clientX 属性和 clientY属性
描述:相对于window,为鼠标相对于window的偏移,不包括滚动条
兼容:所有浏览器都兼容
2.offsetX 属性和 offsetY属性
描述:表示鼠标相对于当前被点击元素padding box的左上偏移值,
兼容:各个浏览器的兼容性五花八门
3. pageX, pageY
描述:为鼠标相对于document的坐标。包括滚动条的偏移
兼容:IE6~IE8浏览器是不支持的
4. screenX, screenY
描述:鼠标相对于显示器屏幕的偏移坐标。
兼容:所有浏览器都兼容