盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft
获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算
offsetTop
获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算
offsetWidth
获取盒子的 宽度+边框+padding+margin的宽度
offsetHeight 同上
getBoundingClientRect 原生方法
它的width和height 获取情况和offsetWidth,offsetHeight相同。
top 获取的是当元素距离窗口的可视顶点的距离如果超过就为负
left获取的是当元素距离窗口的可视最左侧的距离如果超过就为负
clientWidth 指的是 当前元素的高度+padding的上下边距
clientHeight 指的是 当前元素的宽度+padding的左右边距
Jquery 的 offset()
left 获取当前元素距离距离document最左侧的距离 包括margin
top 获取当前元素距离距离document最顶点的距离是页面最顶端,到盒子边框>内边距>元素的距离这个距离包括 margin 但是不同于 getBoundingClientRect 的 top
$ele.width 获取当前元素的宽度 不包括 内边距外边框margin
$ele.height 获取当前元素的高度 不包括 内边距外边框margin
下面是兼容情况,有些版本的浏览器可能不兼容width/height
盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释的更多相关文章
- JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别
/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...
- 一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth
深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。
一:html部分 <body> <input id="btn1" type="button" value="向左"> ...
- offsetLeft, offsetTop以及postion().left , postion().top有神马区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
随机推荐
- python from __future__ import division
1.在python2 中导入未来的支持的语言特征中division(精确除法),即from __future__ import division ,当我们在程序中没有导入该特征时,"/&qu ...
- Mysql 里面使用row_number() 的用法和注意
虽然使用不多,但是也有情况是需要在mysql 里面写语句开发功能的.在sql server 使用惯了,习惯了使用row_number() 函数进行排序,但是mysql 确没有这样一个函数.然后找到了p ...
- 在WINDOWS下初步试用OMNET++ 4
闲扯: 最近实习公司要做ZIGBEE,我是对这个兴趣不大,但工作还是要做的,目前帮着找找合适的仿真软件,什么NS-2啊,OPNET啊. 正文: 这个软件软件直接去官网下载就好了,免费开源. 安装也比较 ...
- WPF 自定义列表筛选 自定义TreeView模板 自定义ListBox模板
有很多项目,都有数据筛选的操作.下面提供一个案例,给大家做参考. 左侧是数据源,搜索框加TreeView控件,右侧是ListBox控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...
- 前端小菜鸟的Mobile之旅---开篇
背景:前段时间有幸参与了公司一个基于H5的手机APP项目,(我们用的React+ES6+Webpack+Cordova开发),由此开始接触一些关于H5开发手机APP方面的知识,下面Shar ...
- 约瑟夫问题(java实现)
方法一.自定义的链表实现 package com.code.yuesefu; public class YueSeFuList { public static void main(String[] a ...
- angularJS(2)
angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...
- [LeetCode] Minimum Height Trees 最小高度树
For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...
- [LeetCode] Add Digits 加数字
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- express不是内部或外部命令
网上找了一下原因,是因为express在4.0以后把命令工具单独分出来了,所以安装完express后,还得再安装express-generator: 如果不是采用的全局安装,则需要把 "安装 ...