JS获取各种宽度、高度的简单介绍


Posted in Javascript onDecember 19, 2014

有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。

JS获取各种宽度、高度的简单介绍

JS获取各种宽度、高度的简单介绍

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetWidth (width+padding+border)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。获取对象可见内容的宽度,不包括滚动条,不包括边框;

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

offsetWidth 与 style.width 的区别

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

Javascript 相关文章推荐
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JavaScript 原型继承
Dec 26 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
vue模板语法-插值详解
Mar 06 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Vue 同步异步存值取值实现案例
Aug 05 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 #Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 #Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
You might like
php高级编程-函数-郑阿奇
2011/07/04 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
python实现清屏的方法
2015/04/30 Python
python的unittest测试类代码实例
2017/12/07 Python
Python 如何提高元组的可读性
2019/08/26 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python Selenium参数配置方法解析
2020/01/19 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
大学生求职自荐信
2013/12/12 职场文书
自我鉴定书面格式
2014/01/13 职场文书
关于迟到的检讨书
2014/01/26 职场文书
学习计划书怎么写
2014/09/15 职场文书
会计主管岗位职责
2015/04/02 职场文书
超市食品安全承诺书
2015/04/29 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js