`
zhengjiong
  • 浏览: 69451 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

阅读更多

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

得到绝对位置脚本代码
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中关于top、clientTop、scrollTop、offsetTop.pdf

    在 JavaScript 中,有多种方式来获取网页的尺寸和位置信息,以下是对 top、clientTop、scrollTop、offsetTop 等属性的详细解释。 一、网页可见区域尺寸 * document.body.clientWidth:网页可见区域的宽度 * ...

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

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

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

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

    jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

    jQuery中animate()的方法 用于创建自定义动画的函数。 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的...

    仿淘宝提示窗口(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大全 web编程

    scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的...

    Javascript元素位置、大小、鼠标定位操作

    4. scrollTop 和 scrollLeft:获取元素的滚动条位置。 三、Style 对象 Style 对象提供了多个属性来获取元素的样式信息。其中包括: 1. width 和 height:获取元素的宽度和高度,excluding 边框、padding、margin ...

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    在使用JavaScript时,我们可以使用offsetTop和offsetLeft属性来获取DIV元素的当前位置,然后使用scrollTop和scrollLeft属性来获取滚动条的当前位置。最后,我们可以使用这些属性来计算DIV元素的新位置,并将其设置为...

    可以实现拖动的DIV模态窗口代码

    mouseBeginX = parseInt(document.body.scrollLeft) + parseInt(event.clientX); mouseBeginY = parseInt(document.body.scrollTop) + parseInt(event.clientY); //拖曳对象起始top,left值 modeBeginTop = ...

    JavaScript Table行定位效果

    最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...

    原生js简单实现放大镜特效

    普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父...

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

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

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

    HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。... 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop  详细定义如下:  1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回

    基于javascript的无缝滚动动画实现2

    不过换汤不换药,还是来来回回在scrollTop/scrollLeft与offsetTop/offsetLeft上做文章。总的思路基本是这样,让某个元素整体向某个方向移动,这样它里面的内容(图片或文字)就跟着移动,当元素移动到某一个距离后就...

    javascript 获取鼠标的绝对位置 event

    return el.offsetTop; } ``` 这些函数可以帮助我们在开发基于 Web 的应用程序时,轻松地获取鼠标的绝对位置和 HTML 元素的坐标。 获取鼠标的绝对位置是一个非常重要的功能,在基于 Web 的应用程序中起着至关重要...

    实现百度效果 自动显示数据库中的数据

    if (is_div && el.scrollLeft) SL = el.scrollLeft; if (is_div && el.scrollTop) ST = el.scrollTop; var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST }; if (el.offsetParent) { var tmp = this....

    JS获取各种宽度、高度的简单介绍

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

    图片放大镜

    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); ...

    my97日历控件

    =null&&(A.scrollTop>_.scrollTop||A.scrollLeft>_.scrollLeft))?A:_;return{"top":B.scrollTop,"left":B.scrollLeft}}function D($){try{var _=$?($.srcElement||$.target):null;if($dp.cal&&!$dp.eCont&&$dp.dd&&_...

Global site tag (gtag.js) - Google Analytics