盒子 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 ...
随机推荐
- POJ 2255. Tree Recovery
Tree Recovery Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11939 Accepted: 7493 De ...
- wireshark 导出所有filter出来的包
1.Edit->Mark All Displayed 2.File->Export Specified Packets->Marked packets only(选中)
- JavaScript自动生成博文目录导航
转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...
- GO语言总结(3)——数组和切片
上篇博文简单介绍了一下Go语言的基本类型——GO语言总结(2)——基本类型,本篇博文开始介绍Go语言的数组和切片. 一.数组 与其他大多数语言类似,Go语言的数组也是一个元素类型相同的定长的序列. ( ...
- dubbox升级spring到4.x及添加log4j2支持
今天花了点时间,把dubbox依赖的spring从3.x升级成最新版的4.x了,其它一些依赖的组件也顺带升级了,同时dubbo支持的第三方日志组件居然没有log4j2,加了点代码也一并支持了,蛋疼的是 ...
- Zend Framework 1 - Quick Start
创建 Zend 项目 要创建 Zend 项目,首先要下载并解压 Zend Framework. 安装 Zend Framework 下载最新的 Zend Framework 1.12.20 源码包,( ...
- Linux CGroup之freezer分析与应用
Linux Kernel:4.4.17 CGroup的freezer子系统对于成批作业管理系统很有用,可以成批启动/停止任务,以达到及其资源的调度. freezer子系统也有助于针对运行一组任务设置检 ...
- LINUX操作系统VIM的安装和配置
VIM的安装 在命令行敲入"vi"后按"tab"键,可以看到目前系统中只安装了vi和vim.tiny. vim是从VI发展而来的一个文本编辑器,功能更强大. ...
- LVS原理详解
一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...
- PHP SPL（PHP 标准库）
一.什么是SPL? SPL是用于解决典型问题(standard problems)的一组接口与类的集合.(出自:http://php.net/manual/zh/intro.spl.php) SPL, ...