前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常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:表示一个元素的左边框的宽度,以像素表示。如果元素的文本内容方向是从右向左,并且元素内容有溢出,比如,
,这样会在左边产生一个滚动条。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前端开发中常用的尺寸和位置相关推荐
- 前端开发中常用图片格式
前端开发中常用图片格式 在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
- 前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
- NC65在日常开发中常用的代码写法
标题 NC65开发相关代码 版本 1.0.1 作者 walton 说明 收集NC在日常开发中常用的代码写法,示例展示 1.查询 1.1 通过BaseDAO查询结果集并转换 //通过BaseDAO进行查 ...
- iOS开发中常用的方法
iOS开发中常用的方法 系统弹窗: 过期方法: UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"确认报价" ...
- 开发中常用的软件、插件、工具汇总(实时更新)
在开发中常用到的软件.插件.工具及其地址:欢迎大家补充!!! Android开发 JDK:jdk归档网页,包含所有版本jdk 下载地址:http://www.oracle.com/techne ...
- 项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法 一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
- python web开发第三方库_Python Web开发中常用的第三方库
Python Web开发中常用的第三方库 TL;DR 经常有朋友问,如果用Python来做Web开发,该选用什么框架?用 Pyramid 开发Web该选用怎样的组合等问题?在这里我将介绍一些Pytho ...
- java开发常用jar包_Java开发中常用jar包整理及使用
本文整理了我自己在Java开发中常用的jar包以及常用的API记录. 一.common-lang3 简介:一个现在最为常用的jar包,封装了许多常用的工具包 依赖: org.apache.common ...
- php gridview,PHP编程:yii2-GridView在开发中常用的功能及技巧总结
<PHP编程:yii2-GridView在开发中常用的功能及技巧总结>要点: 本文介绍了PHP编程:yii2-GridView在开发中常用的功能及技巧总结,希望对您有用.如果有疑问,可以联 ...
最新文章
- TEE综述:植物—土壤反馈(PSF):自然和农业科学间的桥梁
- [图解]在输入框和文本框中获取和设置光标位置,以及选中文本和获取选中文本值的方法 --- 详解,兼容所有浏览器。...
- linux查看所有磁盘信息fdisk,Linux下添加新硬盘,分区及挂载 挂载好新硬盘后输入fdisk -l命令看当前磁盘信息 可以看...
- 大数据数据收集数据困难_大数据就是好数据吗?研究人员在处理大数据集时遭遇的 5 大挑战...
- 移劢开发者解决方案研究报告——中国开发者生存状况调查
- A站没落了,付费会员成B站破解盈利难题的最优解?
- php数据库图片读取不全,图片显示不出来,但是数据库里有显示
- linux 调节风扇速度命令,ubuntu系统调节GPU风扇转速
- gmssl java api_关于GmSSL Java API编译
- 可查看抖音各项数据的软件有哪些?99%的人可能不知道这3款
- 偏最小二乘法(NIPALS经典实现--未简化)
- My97DatePicker事件无效,触发事件calendar.js,datepicker.css等文件无法加载
- aistudio 常规赛:钢铁缺陷检测挑战赛 经验总结,轻松复现map 47排名再度提升
- Scrapy 入门教程
- 惯性传感器实现全身姿态检测
- 获取企业微信授权code
- 致远OA管理员密码的重置
- dbg 寻找main函数
- Vue vue-router中必不可少的redirect,meta和hidden三个属性
- SpringCloud Alibaba 之Nacos集群部署-高可用保证
热门文章
- 今天题不难,写个题解吧
- 计算机蓝屏重启,电脑总是会蓝屏重启的具体解决方法,一看就能学会
- ScreenMatch适配方案和PxCook配合使用踩坑记录
- html+css实战91-pxcook使用
- Python: 接水问题
- python使用加号运算符可以连接两个字符串_如何在Python连接两个字符串
- 电子合同的履行_电子合同如何履行
- python医疗系统设计_吴裕雄 python 人工智能——智能医疗系统后台用户复诊模块简约版代码展示...
- Java实体类的构建与使用
- mysql创建表分区详细介绍及示例