`

offsetLeft,Left,clientLeft的区别

阅读更多

offsetLeft,Left,clientLeft的区别

 

假设 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 除外)。

分享到:
评论

相关推荐

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

    在JavaScript和Web开发中,了解DOM元素的定位属性至关重要,特别是`offsetLeft`, `left`, 和`clientLeft`之间的区别。这些属性可以帮助开发者精确地控制和计算元素在页面上的位置和大小。 首先,`offsetLeft`是元素...

    Js中_关于top、clientTop、scrollTop、offsetTop

    style.top 和 style.left 是两个相关的属性,它们返回元素的样式中的 top 和 left 属性值。style.top 返回元素的上边缘距离,而 style.left 返回元素的左边缘距离。 例如,在 HTML 中,我们有一个 div 元素: ```...

    javascript获得对象的坐标

    left += parent.offsetLeft; parent = parent.offsetParent; } return { top: top, left: left }; } // 示例用法 var offsetPos = getOffset('myElement'); console.log(offsetPos); ``` ### 注意事项 1. **...

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    本文将详细介绍这些属性的功能、应用场景以及它们之间的区别。 #### 二、offsetTop 和 offsetLeft `offsetTop`和`offsetLeft`是两个常用的属性,用于获取一个元素相对于其父元素或最近的定位祖先元素(position...

    js资料大综合(js浮动,js获取坐标)

    3. `clientTop`和`clientLeft`: 这两个属性返回元素可视区域的顶部和左侧边缘距离,不包括边框。 4. `pageYOffset`和`pageXOffset`: 在window对象上,这两个属性返回整个文档的垂直和水平滚动值。 了解这些坐标...

    DOM元素的绝对位置

    获取DOM元素的绝对位置通常涉及到计算元素的`offsetTop`、`offsetLeft`、`clientTop`、`clientLeft`、`scrollTop`和`scrollLeft`等属性。这些属性反映了元素相对于其最近的定位祖先元素或者视口的位置信息。 `...

    javaScript座标获取

    3. `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`:这些属性提供了元素相对于其最近的定位祖先元素的位置和尺寸,如果祖先没有定位,则相对于文档 body。例如: ```javascript var element = ...

    js获取元素相对窗口位置的实现代码

    当涉及到页面布局和元素定位时,我们需要理解几个重要的属性:offsetTop、offsetLeft、offsetWidth、offsetHeight、clientWidth、clientHeight、clientTop、clientLeft、getBoundingClientRect。下面我们来详细解释...

    详解原生js实现offset方法

    offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } } ``` 在这段代码中...

    JS中获取 DOM 元素的绝对位置实例详解

    `offsetTop` 和 `offsetLeft` 能够获取相对于定位容器的位置,而 `clientTop` 和 `clientLeft` 描述的是元素的边框宽度。`getBoundingClientRect()` 则提供了一个更全面的解决方案,包括元素相对于视口的位置信息。...

    JS获取各种高度宽度1

    获取元素几何尺寸的一个重要方法是`getBoundingClientRect()`,它返回一个对象,包含元素的left、right、top、bottom等属性,提供元素相对于视口的位置信息。 浏览器窗口滚动条的位置可以通过`window.pageXOffset`...

    javascript中offset、client、scroll的属性总结

    getBoundingClientRect()方法返回一个矩形对象,包括元素的top、right、bottom和left属性,这些属性代表了元素相对于视口左上角的位置。 在实际应用中,开发者通常会根据不同的需求选择合适的属性来获取或操作元素...

    js仿百度登录页实现拖动窗口效果

    objLeft = obj.offsetLeft; objTop = obj.offsetTop; posX = event.clientX; posY = event.clientY; } function move(event) { if (isDown) { var x = event.clientX - posX + objLeft; var y = event....

    js模仿html5 placeholder适应于不支持的浏览器

    left += obj.offsetLeft; top += obj.offsetTop; obj = obj.offsetParent; } } return{ left: left, top : top } }, ``` 这个方法用于获取输入框的绝对位置,以确保`label`能正确地显示在其上方。 然后是...

Global site tag (gtag.js) - Google Analytics