首页 > 代码库 > web前端开发中常用的尺寸和位置

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

2024-08-23 09:26:21   223人阅读

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

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

  1. 屏幕尺寸和位置
  2. 元素尺寸和位置
  3. 特殊的元素，文档的尺寸和位置
  4. 鼠标的位置（事件触发的时候才能够获取到）

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

 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中的尺寸位置有所不同。

大家周末愉快。

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


联系
我们