`
rebecca
  • 浏览: 315349 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

offsetLeft你理解了吗?

阅读更多

下面是从网上求知时找到的图,很不错对于理解

 


 

这是我再查阅中,最好的解释了,收藏之。

 

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

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

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

以上属性在 FireFox 中也有效。

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

 

 

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

 

 

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器

scrollTop 是“卷”起来的高度值,示例:
<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

 

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em 
  
top,pixelTop,posTOp这几个类比就行了.
LEFT:   为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft   返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft   设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值

<input type="button" value="点一下" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>

保存为网页,运行一下,点按钮,滚动条移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置。

 

 

来源:http://tainqinhot.iteye.com/blog/385620

  • 大小: 18.1 KB
分享到:
评论

相关推荐

    offsetLeft与clientX的含义1

    因此,如果你需要知道鼠标相对于某个特定元素的位置,你可能需要结合`offsetLeft`来计算。 举个例子,假设我们有一个div元素,并且在它上面监听`mousemove`事件。当鼠标在div内部移动时,我们可以获取到`event....

    谈谈对offsetleft兼容性的理解

    总的来说,理解和处理 `offsetLeft` 的兼容性问题对于跨浏览器的前端开发至关重要,尤其是在维护老项目或支持旧版浏览器时。通过深入理解这些特性,开发者可以编写出更稳定、更具兼容性的代码。

    offsetleft.rar

    在JavaScript编程领域中,`offsetLeft`是一个非常关键的概念,特别是在处理网页元素的布局和位置时。`offsetLeft`属性是HTML DOM...在进行前端开发时,深入理解和熟练运用`offsetLeft`将极大地提升工作效率和代码质量。

    JavaScript中style.left与offsetLeft的用法及区分详解_.docx

    但当你需要动态改变子元素的位置时,你必须修改`style.left`,因为`offsetLeft`是只读的。 在实际应用中,比如在创建动态下拉菜单或焦点轮播图等交互效果时,`offsetLeft`经常用于获取元素的当前位置,而`style....

    js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    为了更好地理解,我们可以参考提供的文件`cell_x_y_offsetLeft.html`。这个文件可能包含一个示例表格,通过运行其中的JavaScript代码,我们可以观察如何通过`offsetLeft`计算单元格的实际位置。 总结来说,通过利用...

    浅析offsetLeft,Left,clientLeft之间的区别

    在JavaScript和Web开发中,了解DOM元素的定位属性至关重要,特别是`offsetLeft`, `left`, ...因此,深入理解`offsetLeft`, `left`, 和`clientLeft`的含义以及它们在不同浏览器下的表现,是提升Web开发技能的关键一步。

    div的offsetLeft与style.left区别

    在Web开发中,div元素的位置信息...通过理解和掌握offsetLeft和style.left的差异,开发者能够更有效率和更准确地实现这些功能。这些知识点不仅适用于初学者,也是前端开发者在日常工作中需要不断回顾和应用的基础知识。

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    在网页开发中,准确获取鼠标位置对于实现交互性功能至关重要。`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是...理解这些属性的差异对于编写高效、兼容的JavaScript代码至关重要。

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 ...最后,需要强调的是,在拖拽系列文章中,我们总是循序渐进,逐步深入,以便读者能够更好地理解和掌握相关知识点。

    javascript中style.left和offsetLeft的用法说明

    首先,理解position属性的作用对于学习style.left和offsetLeft至关重要。在CSS中,position属性用于定义元素的定位类型,它有四个值:static(静态定位)、relative(相对定位)、absolute(绝对定位)和fixed(固定...

    Html网页代码常用小技巧! 正文

    下面将详细介绍这些技巧,帮助读者更好地理解和应用。 ### Html网页代码常用小技巧 #### 1. 禁止右键菜单 通过在表格元素上设置 `oncontextmenu` 属性,可以阻止用户在网页上使用右键菜单: ```html ;"&gt; 禁止...

    window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    `window.setInterval()` 是...理解这两个属性的不同,可以帮助你在处理元素定位和动态布局时更加得心应手。在实际开发中,根据具体需求选择使用`offsetLeft`来获取位置信息,或使用`style.left`来调整元素的位置。

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    在本文中,我们将深入探讨如何使用JavaScript的`offsetLeft`属性来实现一个简单的图片滚动效果。这个效果通过创建一个滚动的图片列表,使得用户能够看到不断移动的图像,类似于一个循环播放的幻灯片。 首先,我们...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    ### 对offsetLeft,offsetTop,scrollLeft,scrollTop几个方法的理解 在前端开发中,了解DOM元素的位置、大小以及滚动情况是非常重要的。`offsetLeft`, `offsetTop`, `scrollLeft`, `scrollTop`等属性可以帮助我们更好...

    javascript基础知识到高级应用.docx

    首先,让我们深入理解运动基础。在JavaScript中,运动通常指的是元素在页面上的动态效果,不仅限于位置变化,还包括透明度、旋转等视觉变化。实现这些运动的基础是改变元素的CSS属性,如`left`、`top`或`opacity`。 ...

    JavaScript获取对象在页面中位置坐标的方法

    首先,我们需要理解两个关键的概念:`offsetTop` 和 `offsetLeft`。这两个属性都是HTML元素对象上的,它们分别表示元素的上边界距离其最近的非定位父元素的顶部和左边界距离。`offsetHeight` 和 `offsetWidth` 则...

    js获取页面控件坐标.pdf

    JS 获取页面控件坐标 ...今天,我们将讨论如何使用 JavaScript 获取...在本文中,我们讨论了如何使用 JavaScript 获取页面控件坐标,并提到了其他相关的属性和方法,希望能够帮助读者更好地理解和掌握 JavaScript 编程。

    hellow_mouse_mouse_

    在IT行业中,尤其是在Web开发领域,Canvas是一个非常重要的元素,它是HTML5标准的一部分,用于在网页上进行...通过不断练习和扩展,你可以创建更复杂的交互式应用,如绘图工具、游戏或其他需要动态图形的Web应用程序。

Global site tag (gtag.js) - Google Analytics