获取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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
js取得url地址参数实例
Feb 22 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 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
wordpress之wp-settings.php
2007/08/17 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP实现的简单日历类
2014/11/29 PHP
微信支付扫码支付php版
2016/07/22 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
newxtree.js代码
2007/03/13 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JS验证不重复验证码
2017/02/10 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python图书管理系统
2020/04/05 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Django继承自带user表并重写的例子
2019/11/18 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
几个Shell Script面试题
2012/08/31 面试题
刑事辩护授权委托书范本
2014/10/17 职场文书
财务检查整改报告
2014/11/06 职场文书
优秀团员自我评价
2015/03/10 职场文书
党员违纪检讨书
2015/05/05 职场文书
校友会致辞
2015/07/30 职场文书