1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
5.offsetParent :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.
得到绝对位置脚本代码
- function GetPosition(obj)
- {
-
var left = 0;
-
var top = 0;
-
-
while(obj != document.body)
- {
- left = obj.offsetLeft;
- top = obj.offsetTop;
-
- obj = obj.offsetParent;
- }
-
-
alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
- }
6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.
7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.
分享到:
相关推荐
### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中,处理页面布局和滚动效果时经常会用到一些DOM属性,如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...
在 JavaScript 中,top、clientTop、scrollTop 和 offsetTop 是四个常用的属性,它们都与元素的位置或尺寸相关。下面,我们将详细介绍这四个属性的含义、用法和差异。 一、offsetTop 和 offsetLeft offsetTop 和 ...
在软件开发中,特别是在Web开发领域,理解和使用`scrollLeft`、`scrollTop`以及相关的DOM元素属性至关重要。这些属性主要用于处理网页元素的滚动位置和尺寸,对于创建动态、响应式的用户界面有着重要的作用。 首先...
除了`scrollTop()`方法之外,还有其他几个与滚动相关的属性也非常实用,包括但不限于: - **`scrollHeight`**: 元素的总高度,包括溢出的内容。 - **`scrollWidth`**: 元素的总宽度,包括溢出的内容。 - **`...
在JavaScript中,处理页面元素的位置和尺寸时,经常会用到几个关键属性,如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途,理解它们之间的差异是进行网页...
尤其是在处理复杂的网页布局时,正确理解和使用`top`、`clientTop`、`scrollTop`、`offsetTop`等属性对于实现精确的页面操作至关重要。下面将详细介绍这些属性的概念、用法以及它们之间的区别。 ### 1. `clientTop`...
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);...网页被卷去的左: document.body.scrollLeft
document.querySelector(".el-main").scrollTop = anchor.offsetTop; }); } } // 滚动到底部 scrollToBottom(){ this.$nextTick(()=>{ setTimeout(()=>{ let scrollDiv = this.$el.querySelector('....
2. 在jQuery中,可以使用`.scrollTop(value)`和`.scrollLeft()`方法。 示例代码: 1. 获取元素宽度:`document.getElementsByClassName("js-new-issue-button")[0].style.width` 2. 获取元素实际显示宽度(考虑内...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相...
首先,我们要理解offset属性的两个关键部分:`offsetTop`和`offsetLeft`。`offsetTop`返回元素距离其最近的定位父元素(或body)顶部的距离,而`offsetLeft`返回元素距离其最近的定位父元素(或body)左边的距离。...
在开始之前,我们需要先理解几个基本的概念: 1. **`offsetTop` 和 `offsetLeft`**:这两个属性可以获取元素相对于其最近的已定位祖先元素(position不为static)的偏移量。 2. **`clientTop` 和 `clientLeft`**:...
#### 三、获取 div 坐标的几种方法 根据不同的浏览器支持情况,可以采用多种方法来获取 div 元素的位置坐标。 ##### 3.1 使用 `getBoundingClientRect()` 此方法返回一个对象,该对象包含元素相对于视口的 top、...
在这个例子中,`test`函数会输出`myDiv`元素的`offsetTop`, `offsetLeft`, `scrollTop`和`scrollLeft`值。通过观察这些值的变化,我们可以了解元素的位置和滚动状态。 总结来说,`offset`和`scroll`属性在...
**scrollLeft** 和 **scrollTop** 主要用于获取或设置元素滚动的位置。 - **scrollLeft**: 设置或获取位于元素左边界和窗口中目前可见内容的最左端之间的距离。这个距离可以用来确定页面在水平方向上的滚动程度。 -...
仿淘宝提示窗口 function getPosXY(a, offset) { ... p[1] += a.offsetTop - (tn == "DIV" && a.scrollTop ? a.scrollTop : 0); if (tn == "BODY") break; a = a.offsetParent; } return p; }
- `document.body.scrollLeft` 和 `document.body.scrollTop` 分别表示网页被卷去的宽度和高度。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 分别表示网页可见区域的宽度和高度,包括了边线的...