JS offset

offsetLeft与offsetTop

没有已经定位的父元素

在没有已经定位的父元素的情况下，offsetParent为body元素。

offsetLeft表示元素盒子box边框到浏览器窗口左边界的距离。

在IE及Chrome浏览器中，offsetLeft = body.margin-left + body.border-left-width + body.padding-left + box.margin-left；

然后在Firefox浏览器中，offsetLeft的计算会忽略body.border-left-width。

offsetTop表示元素盒子box边框到浏览器窗口上边界的距离；其计算规则同offsetLeft。

有已经定位的父元素

在有已经定位的父元素的情况下，offsetParent为最近的已经定位的父元素。

offsetLeft表示元素盒子box边框到父元素边框的距离。

offsetWidth与offsetHeight

无论有没有已经定位的父元素，offsetWidth和offsetHeight的值等于box.width + box.padding + box.border-width

时间： 2024-10-13 12:58:54

JS offset的相关文章

原生js offset的使用学习

最近用到了offset这个鬼,但是有不理解的地方,所以测试一下!!基本用法:找到对象后,使用offsetLeft \ offsetTop \ offsetWidth \ offsetHeight就可以得到对象的宽.高.距离左边的距离,距离右边的距离的具体值. 忘记了,外边的大框框用的position:relative; 搞了两个,里面的灰色块,一个用的定位,一个用的margin: 通过比较, 注意第2.4数据,完全一样,得到的是距离其父元素的左边距和上边距 function offset(

对js offset位置宽高的理解

clientTop,clientLeft:元素边框宽度. clientWidth:元素width+元素padding. offsetWidth:元素width+元素padding+元素边框宽 offsetWidth,offsetHeight: 元素的可见宽度和高度.只跟该元素的本身有关 offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right) offsetHeight=(border-width)*2+(paddin

js和jq中常见的各种位置距离之offset和offset()的区别（三）

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前窗口的偏移坐标附上调试代码: 1 <style> 2 *{margin:0;padding:0;} 3 #parent{ position: relative; padding: 10px; margin:3

js实现jquery的offset()

用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移. function getOffset(Node, offset) { if (!offset) { offset = {}; offset.top = 0; offset

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

js的各个offset！offsetHeight,offsetTop

相信大家刚接触js的时候,总是被offsetHeight,offsetTop,clientHeight,clientTop等等一系列的offset问题搞的头晕.刚刚看高程,也看到了这方面的知识.记录一下,增加理解. 一.首先说偏移量:offsetHeight,offsetTop. 看图说话,方便理解. 这是我画的一个简单的偏移量图.黄色区域是我们的元素,她包括边框,内边距.我们要知道宽.高是对应的.上下左右是对应的.所以最起码不要把offsetLeft和offsetWidth混淆在一起.widt

JS下offsetLeft，style.left，以及jQuery中的offset().left，css("left")的区别。

JS下offsetLeft,style.left,以及jQuery中的offset().left,css("left")的区别. JS下的offsetLeft和style.left,以及jquery的css("left"),对定位的理解相似,如果父元素中有定位元素,都是相对于上一个定位元素(position不为static)定位. 值得一提的是如果没有已经定位的父元素,那么offsetLeft指向的是文档(document)的左边缘,而style.left与css(

js之offset

一.关于offset,我们要弄明白什么 w3中offset相关页面是:http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface 在这里我们可以看到,关于offset共有5个东西需要弄清楚: 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidth 5.offsetHeight 我们根据难易程度把以上5点分为三类来讲解. 在分析之前,先来看段测试代码: <bod

javascript教程系列46: JS三大系列-方便的offset 家族

1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2 offset 结构介绍为: 3 offset常用属性 1 offsetWidth offsetHeight 得到对象的宽度和高度(自己的,与他人无关) offsetWidth = width+padding+border 2 offsetLeft offsetTop 返回距离上级盒子(带有定位)左边的位置如果父级都没有定位则以body 为准 off