offsetTop、offsetLeft、offsetWidth、offsetHeight 【赞】

假设 obj 为某个 HTML 控件。

offsetTop、offsetLeft

  • obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。具体算法请参见 offsetTop、offsetLeft 算法
  • obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

offsetWidth、offsetHeight

  • obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。具体算法请参见 offsetWidth、offsetHeight 算法
  • obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,position 变一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。具体算法请参见 offsetParent 算法

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

相关阅读

【转载】http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp

时间: 2024-10-06 20:51:41

offsetTop、offsetLeft、offsetWidth、offsetHeight 【赞】的相关文章

关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(width,height,top,left) 可以使用一下方法 elementId.style.width = '20px'; elementId.style.height = '40px'; elementId.style.left = '20px'; elementId.style.top = '10p

element.getBoundingClientRect().width/height VS. element.offsetWidth/offsetHeight VS. element.clientWidth/clientHeight VS. element.scrollWidth/scrollHeight

获得元素尺寸可谓多种多样,但通常它们是有一定区别的. 先说说元素的getBoundingClientRect()方法,这个方法的width或height属性可以计算元素尺寸,但width或height除了本身的content的宽高之外还包括padding和border的部分,这里不得不说的一个属性就是元素的offsetWidth和offsetHeight属性,这俩属性和getBoundingClientRect()的width和height属性极其相似,也是包含padding和border的部分

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

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

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight

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

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth

offsetLeft , offsetTop,offsetParent,offsetWidth及offsetHeight

js的offsetWidth,offsetHeight,offsetLeft,offsetTop

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

offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算 offsetTop 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算 offsetWidth 获取盒子的 宽

JS获取元素的offsetTop,offsetLeft等属性

obj.clientWidth   //元素的宽度(可视区的宽度)不包含border     只读属性 obj.clientHeight  //元素的高度(可视区的高度度)不包含border  只读属性 obj.offsetLeft   //元素相对于父元素的left  只读属性,也就是margin-left的值,不含单位 obj.offsetTop  //元素相对于父元素的top   只读属性,也就是margin-top的值,不含单位 obj.offsetWidth  //元素的宽度(实际的宽