获取JS中网页各种高宽与位置的方法总结


Posted in Javascript onJuly 27, 2016

screen对象

获取屏幕的高宽(分辨率)

screen.width     //屏幕的宽
screen.height    //屏幕的高
screen.availWidth  //屏幕可用宽度  屏幕的像素高度减去系统部件高度之后的值
screen.availHeight  //屏幕可用高度  屏幕的像素宽度减去系统部件宽度之后的值

window对象

获得窗口位置及大小

window.screenTop   //窗口顶部距屏幕顶部的距离
window.screenLeft  //窗口左侧距屏幕左侧的距离
window.innerWidth  //窗口中可视区域(viewpoint)的宽度
  alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight  //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关
  alert(window.innerHeight); //chrome 643 ff 657 ie 673
window.outerWidth  //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
  alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 
  //说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
  //ff和ie上下左右有8px的边框宽度
window.outerHeight  //浏览器窗口本身的高度
  alert(window.outerHeight); //chrome 728 ff 744 ie 744

element对象

在介绍element对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;

获取JS中网页各种高宽与位置的方法总结

boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

当不出现滚动条时

body{margin:0;}
#demo{
  width:100px;
  height:100px;
  padding:10px;
  border:20px;
  margin:30px;
  background-color:red;
}
<div id="demo">123456789 123456789</div>

clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)

clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)

clientWidth = 2*padding + width - scrollbarWidth   
console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight 
console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0

offsetWidth:返回元素的宽度包括边框和填充,但不包括边距

offsetHeight:返回元素的高度包括边框和填充,但不包括边距

offsetWidth = 2*border + 2*padding + width 
console.log(document.getElementById('demo').offsetWidth)  //160
offsetHeight = 2*border + 2*padding + height 
console.log(document.getElementById('demo').offsetHeight)  //160

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

console.log(document.getElementById('demo').offsetLeft)  //30
console.log(document.getElementById('demo').offsetTop)  //30

获取JS中网页各种高宽与位置的方法总结

当出现滚动条时

body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id="demo">123456789123456789</div>

scrollWidth: 返回元素的整个宽度(包括带滚动条的隐蔽的地方)

scrollHeight: 返回整个元素的高度(包括带滚动条的隐蔽的地方)

scrollWidth = 2*padding + width  
console.log(document.body.scrollWidth)  //1040
scrollHeight = 2*padding + width  
console.log(document.body.scrollHeight)  //540

scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0,其值随着滚动块滚动而变化

scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0,其值随着滚动块滚动而变化

event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.pageX:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)

event.pageY:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持)

event.clientX:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离

event.clientY:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离

event.screenX:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离

event.screenY:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离

event.offsetX:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离

event.offsetY:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离

获取JS中网页各种高宽与位置的方法总结

总结

以上就是获取JS中网页各种高宽与位置的方法总结,对大家学习JS的时候提供了方便,有需要的小伙伴们可以参考学习。

Javascript 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
You might like
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Python-基础-入门 简介
2014/08/09 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Django使用rest_framework写出API
2020/05/21 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
对祖国的寄语大全
2014/04/11 职场文书
学校安全生产承诺书
2014/05/23 职场文书
119消防日活动总结
2014/08/29 职场文书
人才市场接收函
2015/01/30 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Python实现双向链表基本操作
2022/05/25 Python