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

java前端开发还是后端好 前端可以用java开发吗 web前端开发工程师深圳哪里招

我们在日常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 代码

var ele = document.getElementById(“element”);//获取某一个元素
ele.offsetParent;//获取偏移容器
ele.offsetLeft;//元素相对与偏移容器的左边的偏移量
ele.offsetTop;//元素相对于偏移容器的顶边的偏移量
ele.clientLeft;//通常情况下是元素盒子的左边框的宽度
ele.clientTop;//通常情况下是元素盒子的顶边框的宽度
ele.scrollLeft;//横向滚动条相对于滚动区域宽度(scrollWidth)的位置【滚动条的位置】
ele.scrollTop;//纵向滚动条相对于滚动区域高度(scrollHeight)的位置【滚动条的位置】
ele.scrollLeft = 30;//设置内容区域滚动到30的位置
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:表示滚动条到顶边的距离,可以用来设置内容区域滚动到某一位置,也可以获取当前滚动条的位置。

元素的尺寸:

html 代码

ele.offsetWidth;//元素盒子的尺寸,包括content,padding,border,不包括margin和滚动条的尺寸
ele.offsetHeight;
ele.clientWidth;//元素内容区域的尺寸,包括padding,content的尺寸,不包括border,margin和滚动条的尺寸
ele.clientHeight;
ele.scrollWidth;//元素自身区域的元素和内容区域的真实的尺寸的总和(自身padding+内容区域padding,margin,border,scrollbar)
ele.scrollHeight;

 

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

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

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

html 代码

//获取到页面的body元素
var body = document.body //方法1
var body = document.getElementsByTagName(‘body’)[0] //方法2
//还有其它方法获取到body元素,document.getElementById等,

获取页面的尺寸:
html 代码

//页面的尺寸
document.body.clientWidth;
document.body.clientHeight;
document.body.offsetWidth;
document.body.offsetHeight;
document.body.scrollWidth;
document.body.scrollHeight;
//页面的位置
document.body.clientLeft;
document.body.clientTop;
document.body.offsetLeft;
document.bodyl.offsetTop;
document.body.scrollLeft;
document.body.scrollTop;

 

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

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

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

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

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

html 代码

document.body.addEventListener(‘click’, function(event) {
    console.log(‘相对于浏览器客户区的位置X:’, event.clientX)
    console.log(‘相对于浏览器客户区的位置Y:’, event.clientY)
    console.log(‘相对于页面的位置X:’, event.clientX)
    console.log(‘相对于页面的位置Y:’, event.clientY)
    console.log(‘相对于主屏幕的位置X:’, event.clientX)
    console.log(‘相对于主屏幕的位置Y:’, event.clientY)
})

 

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 代码

$(“#ele”).width();//获取元素的宽度
$(“#ele”).height();//获取元素的高度
$(“#ele”).width(300);//设置元素的宽度
$(“#ele”).height(200);//设置元素的高度

innerWidth()和innerHeight()

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

outerWidth()和outerHeight()

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

html 代码

$(‘#ele’).innerWidth()
$(‘#ele’).innerHeight()
$(‘#ele’).outerWidth()
$(‘#ele’).outerHeight()

jquery中元素的位置:

offset()

position()

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

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

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

html 代码

$(‘#ele’).offset().left
$(‘#ele’).offset().top
$(‘#ele’).position().left
$(‘#ele’).position().top

jquery中关于滚动条的位置

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

html 代码

//有溢出区域的元素滚动条的位置
$(‘#ele’).scrollTop() //返回当前滚动条的位置
$(‘#ele’).scrollLeft() //返回当前滚动条的位置</p>
$(‘#ele’).scrollTop(200) //设置滚动条的位置
$(‘#ele’).scrollLeft(200) //设置滚动条的位置</p>
//页面滚动条的位置
$(‘body’).scrollTop() //返回当前页面滚动条的位置
$(‘body’).scrollLeft() //返回当前页面滚动条的位置</p>
$(‘body’).scrollTop(300) //将当前页面滚动到300的位置
$(‘body’).scrollLeft(300) //将横向滚动条滚动到300的位置

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

前端开发工程师需要具备的能力 web前端开发工程师待遇 前端开发工作的特点

» 本文来自:前端开发者 » 《Web前端开发中常用的尺寸和位置》
» 本文链接地址:https://www.rokub.com/5696.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!