`

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

阅读更多

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时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.


得到绝对位置脚本代码
 

Js代码 复制代码
  1. function GetPosition(obj)   
  2.  {   
  3.   var left = 0;   
  4.   var top = 0;   
  5.     
  6.   while(obj != document.body)   
  7.   {   
  8.   left = obj.offsetLeft;   
  9.   top = obj.offsetTop;   
  10.   
  11.  obj = obj.offsetParent;   
  12.  }   
  13.   
  14.  alert("Left Is : " + left + "\r\n" + "Top Is : " + top);   
  15. }  

 

6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;
   offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;
   screenX, screenY是相对于用户显示器的位置
   x,y是鼠标当前相对于当前浏览器的位置

 

 

 

分享到:
评论

相关推荐

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

    ### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中,处理页面布局和滚动效果时经常会用到一些DOM属性,如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...

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

    在 JavaScript 中,top、clientTop、scrollTop 和 offsetTop 是四个常用的属性,它们都与元素的位置或尺寸相关。下面,我们将详细介绍这四个属性的含义、用法和差异。 一、offsetTop 和 offsetLeft offsetTop 和 ...

    scrollLeft,scrollTop等等详解[定义].pdf

    在软件开发中,特别是在Web开发领域,理解和使用`scrollLeft`、`scrollTop`以及相关的DOM元素属性至关重要。这些属性主要用于处理网页元素的滚动位置和尺寸,对于创建动态、响应式的用户界面有着重要的作用。 首先...

    js中scrollTop()方法和scroll()方法用法示例.docx

    除了`scrollTop()`方法之外,还有其他几个与滚动相关的属性也非常实用,包括但不限于: - **`scrollHeight`**: 元素的总高度,包括溢出的内容。 - **`scrollWidth`**: 元素的总宽度,包括溢出的内容。 - **`...

    js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

    在JavaScript中,处理页面元素的位置和尺寸时,经常会用到几个关键属性,如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途,理解它们之间的差异是进行网页...

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

    尤其是在处理复杂的网页布局时,正确理解和使用`top`、`clientTop`、`scrollTop`、`offsetTop`等属性对于实现精确的页面操作至关重要。下面将详细介绍这些属性的概念、用法以及它们之间的区别。 ### 1. `clientTop`...

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);...网页被卷去的左: document.body.scrollLeft

    vue项目设置scrollTop不起作用(总结)

    document.querySelector(".el-main").scrollTop = anchor.offsetTop; }); } } // 滚动到底部 scrollToBottom(){ this.$nextTick(()=>{ setTimeout(()=>{ let scrollDiv = this.$el.querySelector('....

    JS获取各种高度宽度1

    2. 在jQuery中,可以使用`.scrollTop(value)`和`.scrollLeft()`方法。 示例代码: 1. 获取元素宽度:`document.getElementsByClassName("js-new-issue-button")[0].style.width` 2. 获取元素实际显示宽度(考虑内...

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相...

    纯JS offset实现无缝滚动 方向可改变

    首先,我们要理解offset属性的两个关键部分:`offsetTop`和`offsetLeft`。`offsetTop`返回元素距离其最近的定位父元素(或body)顶部的距离,而`offsetLeft`返回元素距离其最近的定位父元素(或body)左边的距离。...

    javascript获得对象的坐标

    在开始之前,我们需要先理解几个基本的概念: 1. **`offsetTop` 和 `offsetLeft`**:这两个属性可以获取元素相对于其最近的已定位祖先元素(position不为static)的偏移量。 2. **`clientTop` 和 `clientLeft`**:...

    js获取div的位置坐标

    #### 三、获取 div 坐标的几种方法 根据不同的浏览器支持情况,可以采用多种方法来获取 div 元素的位置坐标。 ##### 3.1 使用 `getBoundingClientRect()` 此方法返回一个对象,该对象包含元素相对于视口的 top、...

    js中的scroll和offset 使用比较的实例与分析.docx

    在这个例子中,`test`函数会输出`myDiv`元素的`offsetTop`, `offsetLeft`, `scrollTop`和`scrollLeft`值。通过观察这些值的变化,我们可以了解元素的位置和滚动状态。 总结来说,`offset`和`scroll`属性在...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    **scrollLeft** 和 **scrollTop** 主要用于获取或设置元素滚动的位置。 - **scrollLeft**: 设置或获取位于元素左边界和窗口中目前可见内容的最左端之间的距离。这个距离可以用来确定页面在水平方向上的滚动程度。 -...

    仿淘宝提示窗口(html+js)

    仿淘宝提示窗口 function getPosXY(a, offset) { ... p[1] += a.offsetTop - (tn == "DIV" && a.scrollTop ? a.scrollTop : 0); if (tn == "BODY") break; a = a.offsetParent; } return p; }

    js获取屏幕分辨率的方法

    - `document.body.scrollLeft` 和 `document.body.scrollTop` 分别表示网页被卷去的宽度和高度。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 分别表示网页可见区域的宽度和高度,包括了边线的...

Global site tag (gtag.js) - Google Analytics