盒子 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 ...
随机推荐
- OutPut子句的使用限制
Output子句很方便,多数情况下可以省略了更新后插入或者删除后插入操作表,将2个语句变成1个语句操作.不管从语句美观还是效率上都是有不错的提升, 但是对于Output自身,也是有一些限制的. 从文档 ...
- 切换“使用被动式FTP”
-- 本文版权归博客园和dige1993所有,访问作者博客 -- 最近用Dreamweaver做了几个网页,打算上传到远程FTP服务器的时候,同步文件和连接FTP服务器时总是超时出错,一直处在&quo ...
- CentOS7 安装Nginx
由于需要,这段时间学一点“nginx”.关于nginx就不介绍了,http://wiki.nginx.org/Main有非常详细的介绍.安装等. 安装软件我习惯到官网下载源码,http://nginx ...
- UVA10325 The Lottery（容斥原理）
题意: 给n,m,和m个数(k1~km).求1~n中有多少个数不是(k1~km)中任意一数的倍数. 题解: 容斥模板题.反面考虑,a的倍数有n/a个:既是a,也是b的倍数,即lcm(a,b)的倍数有n ...
- 为什么 C++ 中成员函数指针是 16 字节？
当我们讨论指针时,通常假设它是一种可以用 void * 指针来表示的东西,在 x86_64 平台下是 8 个字节大小.例如,下面是来自 维基百科中关于 x86_64 的文章 的摘录: Pushes a ...
- javascript中的自执行函数
学习es6的时候遇到了自执行函数,感觉有必要写下来,一方面加深自己的记忆,另一方面还能分享给大家. 什么是自执行函数? 自执行函数就是为了不污染全局变量命名空间的一中匿名函数,相当于自己创建了一个作用 ...
- 数据库 数据库SQL语句一
字符和日期 --字符和日期都要包含在单引号中 --字符大小写敏感,日期格式敏感 --默认的日期格式是DD-MON-RR --查询当前系统时间 SQL> select sysdate from d ...
- Python 【第十一章】 Django模版
1.直接传值 urls.py """mysite URL Configuration The `urlpatterns` list routes URLs to view ...
- U8采购订单联查采购入库单
1.表头rdrecord01,字段ipurorderid(采购订单ID), cOrderCode(采购订单号)要与采购订单表头主键和单号对应 表体rdrecords01,字段cPOID(采购订单号), ...
- 递推 hdu 3411
http://blog.csdn.net/wust_xhj/article/details/47779539 怎么推可以看这里 f[0]=0 f[1]=1 [0,1]* | 0 q |(n-1)= ...