DOCTYPE html> 55-JavaScript-offsetParent..."> /* 1.offsetParent...oSDiv = document.querySelector(".son"); oSDiv.onclick = function () { console.log(oSDiv.offsetParent
在js中，offsetParent 属性表示最近的上级定位元素。...要获取相对父级元素的位置，可以先判断 offsetParent 属性是否指向父元素，如果是，则直接使用 offsetLeft 和 offsetTop 属性获取元素相对于父元素的距离；否则分别获得当前元素和父元素距离窗口的坐标...获取指定元素距离父元素左上角的偏移坐标//参数：e表示获取位置的元素//返回值：返回对象直接量，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离function getP (e) { if (e.parentNode == e.offsetParent...) { //判断offsetParent属性是否指向父级元素 var x = e.offsetLeft; //如果是，则直接读取offsetLeft属性值 var y =
offsetParent offset、position两个api内部的实现都依赖offsetParent方法,我们先看一下它是怎么一回事。...offsetParent属性供我们使用，为什么Zepto还要自己实现一个呢？...源码分析 offsetParent: function () { return this.map(function () { var parent = this.offsetParent |...this.length) return var elem = this[0], offsetParent = this.offsetParent(), offset = this.offset...第一步 var offsetParent = this.offsetParent(), // Get correct offsets // 获取当前元素相对于document的位置 offset = this.offset
// body的父元素是html，html的父元素是document while ( offsetParent && ( offsetParent === doc.body...|| offsetParent === doc.documentElement ) && jQuery.css( offsetParent, "position" ) === "static..."元素类型" if ( offsetParent && offsetParent !...&& offsetParent !...== elem && offsetParent.nodeType === 1 ) 是要减去border属性的值的 parentOffset.top += jQuery.css( offsetParent
原文链接 源码仓库 offsetParent offset、position两个api内部的实现都依赖offsetParent方法,我们先看一下它是怎么一回事。...offsetParent属性供我们使用，为什么Zepto还要自己实现一个呢？...源码分析 offsetParent: function () { return this.map(function () { var parent = this.offsetParent |...this.length) return var elem = this[0], offsetParent = this.offsetParent(), offset = this.offset...第一步 var offsetParent = this.offsetParent(), // Get correct offsets // 获取当前元素相对于document的位置 offset = this.offset
1. offset offset 指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分 offsetParent属性返回一个对象的引用...，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。...如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。.../relative），offsetParent取父级中最近的元素 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型...offsetParent 属性指定的父坐标的计算左侧位置，整型，单位：像素。
也许你看到这里会觉得奇怪，怎么突然冒出个offsetParent出来，先别急，后面我要讲offsetTop和offsetLeft，因为这两个和offsetParent离不开关系，所以我就先好后介绍一下...offsetParent。...offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。...如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。 ...指的是offsetLeft只读属性返回当前元素左上角在offsetParent节点内向左偏移的像素数。
介绍这两个属性之前，先介绍下 offsetParent 属性，这样有助于理解。...offsetParent HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。...当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。...offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。...var offsetParent = element.offsetParent; offsetTop HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent
offset家族包括： offsetWidth offsetHight offsetLeft offsetTop offsetParent 下面分别介绍。...（100+20+20） console.log(typeof div1.offsetHeight); //打印结果：number 2、offsetParent...offsetParent：获取当前元素的定位父元素。...如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么 offsetParent 获取的是最近的那个父元素。...如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent 获取的是body。 举例： <!
其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。...获取某个元素在页面上的偏移量： function getElementLeft(element){ var actualLeft=element.offsetLeft; var current=element.offsetParent...== null){ actualLeft += current.offsetLeft; current = current.offsetParent; }...actualLeft; } function getElementTop(element){ var actualTop=element.offsetTop; var current=element.offsetParent...== element.offsetParent){ actualTop += current.offsetTop; current = current.offsetParent
注意返回的是相对于 HTMLElement.offsetParent 节点左边边界的偏移量。 何为HTMLElement.offsetParent?...当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。...offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。...当祖先元素中有定位元素(或者上述标签元素)时，它就可以被称为元素的offsetParent。...使用递归解决，累加偏移量 offset，当前 offsetParent 不为 body 时。 继续递归向上超着 offsetParent 累加 offset，直到遇到 body 元素停止。
.offsetParent() ootNodeRE = /^(?...:body|html)$/i offsetParent: function() { return this.map(function() { var parent = this.offsetParent...var parent = this.offsetParent || document.body 获取元素的 offsetParent 属性，如果不存在，则默认赋值为 body 元素。...offsetParent = this.offsetParent(), offset = this.offset(), parentOffset = rootNodeRE.test(offsetParent...{ top: 0, left: 0 } : offsetParent.offset() 分别获取到第一个定位父元素 offsetParent 及相对文档偏移量 parentOffset ，和自身的相对文档偏移量
HTMLElement.offsetParent ：最近一个已进行CSS定位的祖先元素。 6. ...HTMLElement.offsetTop/Left ：元素border外边框的左上角离offsetParent的padding外边框的左上角的垂直、水平距离。...若offsetParent为body或 html标签，且body的position不为relative或absolute时，offsetTop/Left为元素border外边框的左上角 离页面左上角的垂直...若body的position为relative或absolute时，则为元素border外边框的左上角离 offsetParent的padding外边框的左上角的垂直、水平距离。...注意：IE,FF,Chrome下，怪异模式和标准模式的最顶层offsetParent均为body元素，body.offsetParent和document.documentElement.offsetParent
首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。...== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } ...actualTop; } 由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。...== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } ...== null){ actualTop += current. offsetTop; current = current.offsetParent; }
获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法： 一：通过叠加元素对象和它的offsetParent...offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时，了解到要获取某个元素在页面上的偏移量，需要将这个元素的offsetLeft和offsetTop与其offsetParent...所以，要得到元素到文档区域的坐标位置，只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止。...; // 取得元素的offsetParent // 一直循环直到根元素 while (current !...== null) { actualLeft += current.offsetLeft; actualTop += current.offsetTop; current = current.offsetParent
offsetWidth = clientWidth + scrollBar + border image.png element.offsetTop/element.offsetLeft 首先了解什么是 offsetParent...: 它是距离 element 最近的设置了定位的父元素，如果 element 的所有父元素都没有设置定位，则 offsetParent 为 body 元素。...element.offsetTop = offsetParent.marginTop + offsetParent.borderTop + offsetParent.paddingTop + element.marginTop...element.offsetLeft = offsetParent.marginLeft + offsetParent.borderLeft + offsetParent.paddingLeft +...position(): 返回元素相对于其 offsetParent（(左上角为原点)） 的当前坐标值 两者区别看下图： image.png 参考： https://juejin.im/entry/583a9d4961ff4b007ecbfaff
1.3、offset系列 在此之前，我们先看看一个属性：offsetParent。 offset是偏移的意思，既然是偏移就要有一个参照物，这个参照物就是 offsetParent。...元素的 offsetParent 的获取方式： 通过元素的offsetParent属性直接获取。 元素position:fixed，则其offsetParent的值为null，此时相对视口定位。...元素非fixed定位，其父元素无位设置定位，则offsetParent均为。 元素非fixed定位，其父元素中有设置定位的，则其中离当前元素最近的父元素为offsetParent。...的offsetParent为null，相对视口定位。
border //元素的宽度 obj.offsetHeight = border-width*2+padding-top+height+padding-bottom //元素的高度 offsetParent...属性返回一个对象的引用，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。...如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。...如果当前元素的父级元素中没有进行CSS定位（position为absolute/relative），offsetParent为body 如果当前元素的父级元素中有CSS定位（position为absolute.../relative），offsetParent取父级中最近的元素 obj.offsetLeft //合并后的高度 ，元素相对于父元素获整个版面，由offsetParent 属性指定的父坐标的计算上侧位置
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。...obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。...我们对前面提到的 offsetParent 作个说明。 offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。...offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 <input type=”button” value=”点一下
------------------ function findPosX(obj) {//辅助函数 得到元素左边与浏览器左边的边距 var curleft = 0; if (obj && obj.offsetParent...) { while (obj.offsetParent) { curleft += obj.offsetLeft; obj = obj.offsetParent; } } else...document.body.clientLeft; } function findPosY(obj) {//辅助函数 得到元素上边与浏览器上边的边距 var curtop = 0; if (obj && obj.offsetParent...) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; } } else if
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
