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

时间: 08-06

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(&quot;left&quot;)的区别。

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