以下部分内容翻译自 W3C 的 CSSOM View Module,W3C 工作草案 2008年2月22日。
在元素 A 上调用 offsetWidth 属性时,必须按以下算法返回结果值:
- 如果元素 A 不具有 CSS 布局盒子,则返回 0,并停止本算法。
- 以 CSS 像素为单位,返回元素 A 的边框盒子宽度。
在元素 A 上调用 offsetHeight 属性时,必须按以下算法返回结果值:
- 如果元素 A 不具有 CSS 布局盒子,则返回 0,并停止本算法。
- 以 CSS 像素为单位,返回元素 A 的边框盒子高度。
为了更好地理解,可以参照下图:
上图中,蓝色区域是小块的边框,蓝框外白色区域是小块的 margin,小块的 offsetWidth、offsetHeight 如图中所标示,是包括其蓝色边框的。
以下部分内容翻译自 W3C 的 CSSOM View Module,W3C 工作草案 2008年2月22日。
在元素 A 上调用 offsetTop 属性时,必须按以下算法返回结果值:
- 如果元素 A 是 HTML 的 body 元素,其 display 属性计算值是 none,或者不具有 CSS 布局盒子,则返回 0,并停止本算法。
- 如果元素 A 的 offsetParent 是 null 或者是 HTML 的 body 元素,以 CSS 像素为单位返回元素 A 上边框距画布原点的垂直距离,并停止本算法。
- 以 CSS 像素为单位返回元素 A 上边框距其 offsetParent 上边框的距离。
在元素 A 上调用 offsetLeft 属性时,必须按以下算法返回结果值:
- 如果元素 A 是 HTML 的 body 元素,其 display 属性计算值是 none,或者不具有 CSS 布局盒子,则返回 0,并停止本算法。
- 如果元素 A 的 offsetParent 是 null 或者是 HTML 的 body 元素,以 CSS 像素为单位返回元素 A 左边框距画布原点的水平距离,并停止本算法。
- 以 CSS 像素为单位返回元素 A 左边框距其 offsetParent 左边框的距离。
为了更好地理解,可以参照下图:
上图中,大块是小块的 offsetParent,红色是大块的边框,蓝色是小块的边框,蓝框外白色区域是大块的 padding 或/和 小块的 margin 或其他元素或其他原因造成的空白。offsetTop 是小块上边框上部与大块上边框下部的距离;offsetLeft 是小块左边框左部与大块左边框右部的距离。
from:千一网
分享到:
相关推荐
Javascript拖拽用到的一些关于位置定位的一些参数
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF ...(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: ...
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。 obj...
var height=e.offsetHeight; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } } 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 obj.offsetLeft 指...
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 offsetWidth 获取对
javascript中可以通过四个属性获得元素的偏移量,offsetHeight、offsetWidth、offsetLeft、offsetTop,下面为大家解释下各属性的含义
offsetWidth/offsetHeight——视觉大小:看得见的大小,不包括margin的元素的宽度或高度,只包括padding、border、水平滚动条的宽度或高度。 offsetTop/offsetLeft——当前元素的偏移量:当父级有定位,根据父级的...
var x = event.x-elm.offsetLeft; x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w; zoomImg.style.marginLeft=(w-x)*zoomRate; var y = event.y-elm.offsetTop; y=y<(elm.offsetHeight-h)?y<h?h:y:elm....
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以... offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 scrollHeight: 获取对象的滚动
offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event....
maxWidth = smalmg.clientWidth - showimg.offsetWidth; maxHeight = smalmg.clientHeight - showimg.offsetHeight; //上面两个变量指明showimg允许活动的区域 }; smalmg.onmousemove = function(e){ e = e || ...
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。 offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。 offsetWidth 指元素控件自身的宽度,整型,单位像素。 offsetHeight 指元素控件自身的...
实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。 之前做的比较多的...
在阅读本文前,可以先阅读《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性》这篇文章,以理清上下文关系。好了,让我们开始进入正题。 模型相同的属性/方法 1 Button属性 ...
clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth; clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight; 鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的,因为当放大镜A的右边框移动到与小图B的...
JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //...
javascript可以通过四个属性可以获得元素的偏移量,分别是1、offsetHeight,2、offsetWidth,3、offsetLeft,4、offsetTop,今天我们就来具体谈一下获取页面元素偏移量的最佳方法。
1.offsetTop :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft :当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离请用style....