盒子 offsetLeft、offsetTop、offsetWidth 等属性解释

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

时间： 2024-10-08 09:46:50

盒子 offsetLeft、offsetTop、offsetWidth 等属性解释的相关文章

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度二.DOM中的坐标系下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用注意: 1.当对象的offsetParent属性指向

0186 元素偏移量 offset 系列：offsetTop，offsetLeft，offsetWidth，offsetHeight，offset 与 style 区别，

1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

一:html部分 <body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1">/*外框,显示区域*/ <ul id="ul1">/*循

js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置position为absolute或relative),则offsetParent为根目录: 2)当元素的父元素没有进行css定位,则offsetParent取最近的已经定位的元素: 3)当元素的父元素进行了css定位,则offsetParent为父元素: 2.offsetLeft,offsetTop 在IE中:

solr的schema.xml配置属性解释

schema.xml做什么? SOLR加载数据,创建索引和数据时,核心数据结构的配置文件是schema.xml,该配置文件主要用于配置数据源,字段类型定义,搜索类型定义等.schema.xml的配置直接影响搜索结果的准确性与效率. <types></types>节点 types节点主要用于搜索类型的定义,这里给出常用类型的定义. 1 <fieldType name="string" class="solr.StrField" sortM

7.maven配置文件中<scope>的6种配置属性解释（源自官方文档） -- 依赖的范围

7.maven配置文件中<scope>的6中配置属性解释说明:我们知道在pom.xml中<scope>标签是设置依赖作用域的,那么具体的设置类型有哪几种,分别作用的什么时候呢? Dependency Scope Dependency scope is used to limit the transitivity of a dependency, and also to affect the classpath used for various build tasks. There

盒子模型中的margin属性

记: 1.如果margin只有一个值,表示上右下左的margin同为这个值.例如:margin:10px; 就等于 margin:10px 10px 10px 10px; 2.如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值.例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px; 3.如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的

<display:table>常用属性解释

1.官方网址:http://www.displaytag.org/1.2/displaytag/tagreference.html 2.应用举例:<display:table name="requestScope.pageList" id="curPage" class="table table-striped" sort="external" requestURI="${resource}/test/lis