标签：str blog windows系统 set screen 介绍 容器 屏幕尺寸 nbsp
我们在日常web前端开发过程中，会经常用到各种尺寸和位置。通常是js做动画的时候。轮播图，滚屏动画，粒子，碰撞检测，拖拽，滚动加载等等。这里我将常用的尺寸和位置的获取进行总结，不包括canvas，SVG。
在web页面开发中，尺寸和位置分为屏幕的尺寸和位置，元素的尺寸和位置，还有一个是文档的尺寸和位置，不过文档的尺寸和位置是通过document.body获取的，也算是一个元素。还有鼠标的位置。所以尺寸和位置主要分为三类：
以下是相关的尺寸和位置的获取方法。单位都是像素值。
1.屏幕的尺寸和位置，通过screen对象获取；
screen === window.screen;//true; screen.width;//屏幕的像素宽度 screen.height;//屏幕的像素高度 screen.availHeight;//屏幕的可用高度，Windows系统下，通常是去除任务栏的高度值 screen.availWidth;//屏幕的可用宽度，Windows系统下，通常是去除任务栏宽度值 screen.availLeft;//屏幕的最左边相对于主屏幕最左边的偏移值 screen.availTop;//屏幕的最顶边相对于主屏幕最顶边的偏移值
这里需要说一下可用高度，宽度，以及偏移值。
可用高度和宽度的值，在chrome浏览器下（版本：54.0.2840.99 ）并不是实时获取的，不知道以后的版本会不会出现变动。也就是说，当打开了chrome浏览器后，屏幕可用宽度或者可用高度就已经确定了。此时调整任务栏的位置，高度，宽度等，都影响不到这两个值（screen.availWidth,screen.availHeight）,除非改变屏幕的分辨率，或者重启浏览器。而Firefox中，屏幕相关的所有信息都是实时获取的。
关于偏移值（availLeft和availTop），这两个值，在单屏幕的时候，都是0，只有在有扩展屏的情况下，扩展屏中的浏览器中的screen对象才有非0的值，这个值就是扩展屏相对于主屏幕的偏移值。
2.元素的尺寸和位置
元素的位置
页面中所有的元素都有基本的属性，其中有些基本属性与元素的位置和尺寸相关。元素位置相关的属性，都是相对位置，即元素相对于其偏移容器（offsetParent）的偏移量
1 var ele = document.getElementById("element");//获取某一个元素 2 ele.offsetParent;//获取偏移容器 3 ele.offsetLeft;//元素相对与偏移容器的左边的偏移量 4 ele.offsetTop;//元素相对于偏移容器的顶边的偏移量 5 6 ele.clientLeft;//通常情况下是元素盒子的左边框的宽度 7 ele.clientTop;//通常情况下是元素盒子的顶边框的宽度 8 9 ele.scrollLeft;//横向滚动条相对于滚动区域宽度(scrollWidth)的位置【滚动条的位置】 10 ele.scrollTop;//纵向滚动条相对于滚动区域高度(scrollHeight)的位置【滚动条的位置】 11 12 ele.scrollLeft = 30;//设置内容区域滚动到30的位置 13 ele.scrollTop = 50;//设置内容区域滚动到50的位置
对于offsetLeft和offsetTop这两个值，是相对于偏移容器的。有两种情况：
1.元素是通过position定位的；
2.元素是通过float或者margin定位的；
第一种情况下，offsetLeft和offsetTop的值，是left值和top值。
第二种情况下，offsetLeft和offsetTop的值，是margin-left和margin-top的值。
clientLeft:表示一个元素的左边框的宽度，以像素表示。如果元素的文本内容方向是从右向左，并且元素内容有溢出，比如，<div dir="rtl">hello</div>，这样会在左边产生一个滚动条。clientLeft就会包含滚动条的宽度，即是滚动条和边框的宽度之和。
clientTop：表示一个元素的顶部边框的宽度。
scrollLeft:表示滚动条到元素左边的距离，可以用来设置内容区域滚动到某一位置，也可以获取当前滚动条的位置
scrollTop:表示滚动条到顶边的距离，可以用来设置内容区域滚动到某一位置，也可以获取当前滚动条的位置。
元素的尺寸
1 ele.offsetWidth;//元素盒子的尺寸，包括content,padding，border，不包括margin和滚动条的尺寸 2 ele.offsetHeight; 3 4 ele.clientWidth;//元素内容区域的尺寸，包括padding,content的尺寸，不包括border，margin和滚动条的尺寸 5 ele.clientHeight; 6 7 ele.scrollWidth;//元素自身区域的元素和内容区域的真实的尺寸的总和（自身padding+内容区域padding,margin,border,scrollbar） 8 ele.scrollHeight;
3.页面的尺寸和位置----特殊的元素：document.body
通常情况下，我们只需要获取到页面的尺寸即可，页面的位置在实际开发中基本上用不上。我们获取页面的尺寸也是和元素获取尺寸时候一样，通过上面几个属性值获取。
我们是通过页面中的body元素获取到页面的尺寸的。
1 //获取到页面的body元素 2 var body = document.body;//方法1 3 var body = document.getElementsByTagName("body")[0];//方法2 4 //还有其它方法获取到body元素，document.getElementById等，
获取页面的尺寸
1 //页面的尺寸 2 document.body.clientWidth; 3 document.body.clientHeight; 4 5 document.body.offsetWidth; 6 document.body.offsetHeight; 7 8 document.body.scrollWidth; 9 document.body.scrollHeight; 10 11 //页面的位置 12 document.body.clientLeft; 13 document.body.clientTop; 14 15 document.body.offsetLeft; 16 document.bodyl.offsetTop; 17 18 document.body.scrollLeft; 19 document.body.scrollTop;
4.在鼠标事件中获取到鼠标的位置
鼠标的位置只有在鼠标事件中才可以获取到。【onclick,onmousemove,onmousedown,onmouseenter,onmouseleave,onmouseover,onmouseout】,事件发生时候，event对象有一些属性值是和鼠标位置相关的。
clientX,clientY;是鼠标相对于浏览器客户区的位置，不包括浏览器的地址栏，书签栏，底部状态栏等浏览器特性，只是文档显示区域。永远为正值
pageX,pageY;是鼠标相对于文档的位置，即相对于document的位置。pageX,pageY和clientX,clientY和body的宽度无关。如果页面没有滚动的话，二者的值相等。永远为正值。
screenX,screenY;是鼠标相对于主屏幕的位置。存在负值，这就要看扩展屏幕的设置了。
1 document.body.addEventListener("click",function(event){ 2 console.log("相对于浏览器客户区的位置X:",event.clientX); 3 console.log("相对于浏览器客户区的位置Y:",event.clientY); 4 5 console.log("相对于页面的位置X:",event.clientX); 6 console.log("相对于页面的位置Y:",event.clientY); 7 8 console.log("相对于主屏幕的位置X:",event.clientX); 9 console.log("相对于主屏幕的位置Y:",event.clientY); 10 });
5.关于css中设置的width和height；
css中关于元素的尺寸的设置，width和height，只是设置元素的内容区域的尺寸。如果元素还有margin,padding,border的话，元素真实占用的页面尺寸会比width和height所设置的要大。
更多关于元素尺寸的信息，我会在关于盒子模型的文章中做详细的介绍。
6.jQuery中的尺寸和位置
jQuery中的尺寸：width()和height()
获取jQuery对象的宽度和高度，可以通过width()和height()，这二者获取到的是元素通过css设置的width和height，不包括元素的内边距，边框和外边距。
width()和height()不仅可以获取元素的尺寸，也可以设置元素的尺寸
$("#ele").width();//获取元素的宽度
$("#ele").height();//获取元素的高度
$("#ele").width(300);//设置元素的宽度
$("#ele").height(200);//设置元素的高度
innerWidth()和innerHeight()
这两个方法可以获取到元素的尺寸，包括内边距
outerWidth()和outerHeight()
这两个方法可以获取到元素的尺寸，包括内边距和边框
$("#ele").innerWidth();
$("#ele").innerHeight();
$("#ele").outerWidth();
$("#ele").outerHeight();
jquery中元素的位置：
offset()
position()
jQuery对象有了两个关于元素的位置的方法，offset()和position()，这两个方法都返回两个属性值，top和left。这两个方法都是只对可见元素有效。
offset()方法是返回元素相对于文档的偏移位置。
position()方法是返回元素相对于父元素的偏移位置。
$("#ele").offset().left;
$("#ele").offset().top;
$("#ele").position().left;
$("#ele").position().top;
jQuery中关于滚动条的位置
scrollTop()和scrollLeft()，这两个方法既可以获取当前滚动条的位置也可以设置滚动条的位置。
//有溢出区域的元素滚动条的位置 $("#ele").scrollTop();//返回当前滚动条的位置 $("#ele").scrollLeft();//返回当前滚动条的位置 $("#ele").scrollTop(200);//设置滚动条的位置 $("#ele").scrollLeft(200);//设置滚动条的位置 //页面滚动条的位置 $("body").scrollTop();//返回当前页面滚动条的位置 $("body").scrollLeft();//返回当前页面滚动条的位置 $("body").scrollTop(300);//将当前页面滚动到300的位置 $("body").scrollLeft(300);//将横向滚动条滚动到300的位置
以上的总结只是针对我们在日常web开发中与dom相关的一些尺寸和位置的介绍。但是在前端开发中，我们也有可能针对canvas和SVG做一些开发，canvas和SVG中的尺寸和位置与dom中的尺寸位置有所不同。
大家周末愉快。
标签：str blog windows系统 set screen 介绍 容器 屏幕尺寸 nbsp
原文地址：http://www.cnblogs.com/pelli/p/6100420.html
