当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js获取屏幕以及元素宽高的方法

js获取屏幕以及元素宽高的方法

2019年10月07日  | 移动技术网IT编程  | 我要评论

一.window相关

网页正文部分上：window.screentop 
网页正文部分左：window.screenleft
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availheight 
屏幕可用工作区宽度：window.screen.availwidth

二.body相关

网页可见区域宽：document.body.clientwidth 
网页可见区域高：document.body.clientheight 
网页可见区域宽：document.body.offsetwidth (包括边线的宽) 
网页可见区域高：document.body.offsetheight (包括边线的宽) 
网页正文全文宽：document.body.scrollwidth 
网页正文全文高：document.body.scrollheight 
网页被卷去的高：document.body.scrolltop 
网页被卷去的左：document.body.scrollleft

三.滚动相关

scrollheight: 获取对象的滚动高度。
scrollwidth:  获取对象的滚动宽度 

document.documentelement.scrolltop 垂直方向滚动的值

四.位置精确定位

scrollleft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrolltop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetleft:获取对象相对于版面或由 offsetparent 属性指定的父坐标的计算左侧位置 
offsettop:获取对象相对于版面或由 offsettop 属性指定的父坐标的计算顶端位置

五.坐标轴

event.clientx 相对文档的水平座标 
event.clienty 相对文档的垂直座标 
event.offsetx 相对容器的水平坐标 
event.offsety 相对容器的垂直坐标

六.width/clientwidth/offsetwidth以及height之间区别

width是指可见内容的宽
height是指可见内容的高
clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = height + padding + border

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网