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模拟按下回车实现代码
Sep 20 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
javascript常用的设计模式
Feb 09 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
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
smarty模板局部缓存方法使用示例
2014/06/17 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
js确定对象类型方法
2012/03/30 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
用 Python 制作地球仪的方法
2020/04/24 Python
PyQt5实现画布小程序
2020/05/30 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
活动志愿者自荐信
2014/01/27 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
五好关工委申报材料
2014/05/31 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
邀请函格式范文
2015/02/02 职场文书
小学感恩主题班会
2015/08/12 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL