`

js对象位置

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

得到绝对位置脚本代码
1function 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
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.


获得对象距浏览器上边框的距离
对象.offsetTop-document.documentElement.scrollTop
分享到:
评论

相关推荐

    js获得对象的x,y位置函数

    javascript获得对象的x,y位置函数

    javascript常用对象梳理

    JS中的常用对象[转载]web 技术 2010-06-05 15:00:30 阅读3 评论0 字号:大中小 订阅 [removed] Window For JavaScript 熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、...

    使用 ML5.js 和 COCO-SSD 模型的 AI 对象检测 Web 应用程序

    当用户启用对象检测开关后,JavaScript将通过ML5.js库加载COCO-SSD模型。一旦模型加载完成,应用程序就可以开始实时检测图像中的对象。 代码中的视频元素用于显示通过摄像头获取的实时视频流。JavaScript代码将这个...

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

    本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 Event 提供了多个属性来获取鼠标的当前位置...

    JavaScript Window窗口对象属性和使用方法

    每个对象都有自己的属性,顶级对象Window是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用。 下表列出了一些Window对象常用属性: 属性 说明 document 对话框中显示...

    【JavaScript源代码】js对象的读取速度实例详解.docx

    js对象的读取速度实例详解  1、访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢。访问对象成员时,就像作用域链一样,在原型链上搜索。 2、如果找到的成员在原型链中的位置太深,访问速度就会变慢。...

    JavaScript程序设计课件:String对象.pptx

    JavaScript程序设计 String对象 6.4.1 String对象 1、创建String对象 在JavaScript中可以使用一对单引号或双引号将任意多个字符引起来,即生成字符型数据。这些字符型数据实际上也是构造函数String的实例,即String...

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

    本文实例讲述了JavaScript获取对象在页面中位置坐标的方法。分享给大家供大家参考,具体如下: [removed] function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;...

    获取对象在整个页面的位置

    获取对象在整个页面的位置获取对象在整个页面的位置获取对象在整个页面的位置

    【JavaScript源代码】教你javascript如何获取指针的位置.docx

     javascript获取指针的位置的方法:使用事件对象的pageX和pageY,或者clientX和clientY属性,并且配合scrollLeft和scrollTop属性,这样就可以计算出指针的位置了。 本文操作环境:windows10系统、javascript 1.8.5...

    源文件程序天下JAVASCRIPT实例自学手册

    4.4.1 通过对象位置访问文档对象 4.4.2 通过name属性访问文档对象 4.4.3 通过id属性访问文档对象 4.4.4 通过联合数组访问文档对象 4.5 创建和使用自定义对象 4.5.1 通过定义对象的构造函数的方法 4.5.2 通过对象直接...

    js鼠标及对象坐标控制属性详细解析

    offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。 offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 offsetHeight获取对象相对于版面或由父坐标 ...

    JavaScript学习笔记之JS事件对象

     event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;  event对象只在事件发生的过程中才有效。  firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数...

    js数组相减简单示例【删除a数组所有与b数组相同元素】

    主要介绍了js数组相减,结合简单示例形式分析了JavaScript删除a数组所有与b数组相同元素相关个遍历、判断、删除等相关操作技巧,需要的朋友可以参考下

    JS在Array数组中按指定位置删除或添加元素对象方法示例

    主要给大家介绍了关于JS在Array数组中按指定位置删除或添加元素对象的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

    ObjectControls:Three.js 的对象控件

    Object Controls 是一种轻量级的尝试,使在three.js 中操作对象更容易一些。 我愿意接受建议,并且很想听听您是否/如何使用它,所以如果您有任何问题/疑虑/评论/普遍仇恨,请在我。 * 在three.js 中控制对象已经很...

    JavaScript基础和实例代码

    4.4.1 通过对象位置访问文档对象 4.4.2 通过name属性访问文档对象 4.4.3 通过id属性访问文档对象 4.4.4 通过联合数组访问文档对象 4.5 创建和使用自定义对象 4.5.1 通过定义对象的构造函数的方法 4.5.2 通过对象直接...

    searchjs:一个用于基于类似于json SQL的语言jsql过滤JavaScript对象的库

    jsql是一种JavaScript查询语言,以及一个简单JavaScript对象(PO​​JSO)参考实现。 这不是要搜索dom,jQuery或某些特定的数据库,也不是要在浏览器中使用SQL。 jsql旨在提供一种本机JSON查询格式来查询任何内容,...

    motion-stream:THREE.js对象的流位置,方向,速度和加速度

    流对象运动stream功能将多个流附加到对象,这些对象报告位置,速度和加速度。 流是通过实现的,一旦创建,您就可以将它们挂在THREE.js对象的motion对象下。 运动输出流motion [0]是位置和方向流motion [1]是平移和...

Global site tag (gtag.js) - Google Analytics