web前端开发中常用的尺寸和位置

原创 15038098692 随笔 随笔 1009阅读 2017-08-28 14:02:05 举报

我们在日常web前端开发过程中,会经常用到各种尺寸和位置。通常是js做动画的时候。轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等。这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG。

在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素。还有鼠标的位置。所以尺寸和位置主要分为三类:

屏幕尺寸和位置
元素尺寸和位置
特殊的元素,文档的尺寸和位置
鼠标的位置(事件触发的时候才能够获取到)[/color]

以下是相关的尺寸和位置的获取方法。单位都是像素值。

1.屏幕的尺寸和位置,通过screen对象获取;
[color=#ffc000]
screen === window.screen;//true;
screen.width;//屏幕的像素宽度
screen.height;//屏幕的像素高度
screen.availHeight;//屏幕的可用高度,Windows系统下,通常是去除任务栏的高度值
screen.availWidth;//屏幕的可用宽度,Windows系统下,通常是去除任务栏宽度值
screen.availLeft;//屏幕的最左边相对于主屏幕最左边的偏移值
screen.availTop;//屏幕的最顶边相对于主屏幕最顶边的偏移值html 代码

这里需要说一下可用高度,宽度,以及偏移值。

可用高度和宽度的值,在chrome浏览器下(版本:54.0.2840.99 )并不是实时获取的,不知道以后的版本会不会出现变动。也就是说,当打开了chrome浏览器后,屏幕可用宽度或者可用高度就已经确定了。此时调整任务栏的位置,高度,宽度等,都影响不到这两个值(screen.availWidth,screen.availHeight),除非改变屏幕的分辨率,或者重启浏览器。而Firefox中,屏幕相关的所有信息都是实时获取的。

关于偏移值(availLeft和availTop),这两个值,在单屏幕的时候,都是0,只有在有扩展屏的情况下,扩展屏中的浏览器中的screen对象才有非0的值,这个值就是扩展屏相对于主屏幕的偏移值。

2.元素的尺寸和位置****

元素的位置

页面中所有的元素都有基本的属性,其中有些基本属性与元素的位置和尺寸相关。元素位置相关的属性,都是相对位置,即元素相对于其偏移容器(offsetParent)的偏移量

html 代码

对于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:表示滚动条到顶边的距离,可以用来设置内容区域滚动到某一位置,也可以获取当前滚动条的位置。

元素的尺寸:

html 代码

3.页面的尺寸和位置----特殊的元素:document.body

通常情况下,我们只需要获取到页面的尺寸即可,页面的位置在实际开发中基本上用不上。我们获取页面的尺寸也是和元素获取尺寸时候一样,通过上面几个属性值获取。

我们是通过页面中的body元素获取到页面的尺寸的。

html 代码

获取页面的尺寸:
html 代码

4.在鼠标事件中获取到鼠标的位置

鼠标的位置只有在鼠标事件中才可以获取到。【onclick,onmousemove,onmousedown,onmouseenter,onmouseleave,onmouseover,onmouseout】,事件发生时候,event对象有一些属性值是和鼠标位置相关的。

clientX,clientY;是鼠标相对于浏览器客户区的位置,不包括浏览器的地址栏,书签栏,底部状态栏等浏览器特性,只是文档显示区域。永远为正值

pageX,pageY;是鼠标相对于文档的位置,即相对于document的位置。pageX,pageY和clientX,clientY和body的宽度无关。如果页面没有滚动的话,二者的值相等。永远为正值。

screenX,screenY;是鼠标相对于主屏幕的位置。存在负值,这就要看扩展屏幕的设置了。

html 代码

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()不仅可以获取元素的尺寸,也可以设置元素的尺寸

html 代码

innerWidth()和innerHeight()

这两个方法可以获取到元素的尺寸,包括内边距

outerWidth()和outerHeight()

这两个方法可以获取到元素的尺寸,包括内边距和边框

html 代码

jquery中元素的位置:

offset()

position()

jQuery对象有了两个关于元素的位置的方法,offset()和position(),这两个方法都返回两个属性值,top和left。这两个方法都是只对可见元素有效。

offset()方法是返回元素相对于文档的偏移位置。

position()方法是返回元素相对于父元素的偏移位置。

html 代码

jQuery中关于滚动条的位置

scrollTop()和scrollLeft(),这两个方法既可以获取当前滚动条的位置也可以设置滚动条的位置。

html 代码

以上的总结只是针对我们在日常web开发中与dom相关的一些尺寸和位置的介绍。但是在前端开发中,我们也有可能针对canvas和SVG做一些开发,canvas和SVG中的尺寸和位置与dom中的尺寸位置有所不同。

附上原文链接http://www.cnblogs.com/pelli/p/6100420.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复