`

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对象属性排序

    本篇文章将深入探讨JavaScript对象属性排序的原理、方法以及注意事项。 首先,了解JavaScript对象的基本特性是至关重要的。在ECMAScript规范中,对象的属性访问速度并不依赖于属性的位置或顺序,因为它们内部是通过...

    js对象基本知识

    这些基础知识构成了JavaScript对象模型的基础,理解和熟练掌握这些概念对于编写JavaScript代码至关重要。在实际编程中,我们经常结合使用这些对象和方法来实现各种功能,如数据处理、用户交互等。随着学习的深入,还...

    javascript常用对象及方法

    javascript常用对象及方法 javascript中有许多常用的对象和方法,了解这些对象和方法可以帮助我们更好地使用javascript。下面我们将详细介绍这些对象和方法。 一、窗口对象Window Window对象是javascript中的顶级...

    js对象层次• navigator •screen•window

    `history`对象允许访问用户的浏览历史,虽然不能直接读取具体的URL,但可以使用`back()`、`forward()`和`go()`方法来导航到历史记录中的特定位置。 `location`对象包含了当前页面的URL信息,包括协议、主机、路径、...

    JavaScript核心对象参考手册

    `window`是浏览器环境下的全局对象,而在Node.js环境中,全局对象为`global`。全局对象中包含了一些内置函数,如`eval()`用于执行一个字符串作为JavaScript代码,`setTimeout()`和`setInterval()`用于定时执行函数。...

    js 贪吃蛇(面向对象)

    总结来说,"js 贪吃蛇(面向对象)"案例提供了学习和实践JavaScript面向对象编程的好机会。通过分析和实现这个案例,开发者可以深入理解面向对象的设计原则,提高代码复用和维护性,同时也能体会到面向对象编程在...

    JS对象与数组参考大全

    JavaScript对象具有原型链,允许对象继承其他对象的属性和方法。`__proto__`(非标准,推荐使用`Object.getPrototypeOf`)指向其构造函数的原型: ```javascript var parentObj = { parentMethod: function() {} }; ...

    小游戏JavaScript面向对象编程贪吃蛇

    在本项目"小游戏JavaScript面向对象编程贪吃蛇"中,我们将深入探讨如何使用JavaScript进行面向对象编程,来实现经典的贪吃蛇游戏。面向对象编程(Object-Oriented Programming, OOP)是编程的一种范式,它将程序设计...

    js高级对象

    JavaScript(JS)是一种广泛用于网页和网络应用的脚本语言,尤其在客户端浏览器环境中发挥着重要作用。"js高级对象"这个主题涵盖了JS中的一些高级特性,包括但不限于window对象、定时器、对话框以及与浏览器交互的...

    javascript:对象化编程

    数组是另一种重要的JavaScript对象,用于存储一系列按顺序排列的数据项: - 创建数组:`var arr = new Array();` 或者 `var arr = [1, 2, 3];` - 访问元素:`arr[0]`, `arr[1]`等。 - `length`: 获取数组的长度。 -...

    全国地图城市坐标JS对象

    XPath是一种在XML文档中查找信息的语言,但在JavaScript对象中,城市名称通常不需要XPath来访问。而“有无城市名称后缀”,可能是指某些城市坐标信息中可能包含了额外的信息,比如“市”或“区”的后缀,这取决于...

    javascript控件开发之渲染对象

    这个对象包含了关于控件外观和行为的所有信息,如尺寸、颜色、位置、事件处理函数等。然后,渲染对象会被用来更新DOM,以反映这些属性的变化。例如,如果一个按钮的文本改变,对应的渲染对象就会更新其文本属性,并...

    js 鼠标移动对象

    在JavaScript编程中,"js 鼠标移动对象"是一个常见的交互式功能,它涉及到HTML5中的SVG(Scalable Vector Graphics)元素和事件监听。SVG是一种用于在网页上绘制矢量图形的标准,而`<svg>`和`<path>`标签是SVG中重要...

    JavaScript入门教程(3) js面向对象

    在现代Web开发中,JavaScript作为一种脚本语言,其核心能力之一就是面向对象编程(OOP)。面向对象编程是一种编程范式,它使用“对象”来设计软件。对象可以包含数据,以属性的形式表示,也可以包含代码,以方法的...

    JS常用对象及用法属性的总结(全)

    `JSON.parse()`用于将JSON字符串转换为JavaScript对象,`JSON.stringify()`将JavaScript对象转换为JSON字符串。 11. **Map与Set**: - ES6引入的新数据结构,`Map`存储键值对,键可以是任意类型,`Set`存储不重复...

    JS之WINDOW对象

    JavaScript中的WINDOW对象是JavaScript在浏览器环境中访问和操作浏览器窗口的核心对象。它包含了与浏览器窗口相关的所有属性和方法,使得开发者能够实现对窗口的各种控制,如打开新的窗口、更改窗口尺寸、滚动内容...

    js面向对象游戏开发,飞机大战

    本项目"js面向对象游戏开发,飞机大战"是利用JavaScript的面向对象特性来实现的一款简单游戏,非常适合初学者入门学习。 首先,我们要理解面向对象的基本概念。面向对象编程基于“对象”的思想,每个对象都包含数据...

    js面向对象知识

    - **原型**:每个JavaScript对象都有一个内置的`__proto__`属性,指向其构造函数的原型对象。原型对象可以提供继承机制,允许对象共享属性和方法。 3. **原型链** - **原型链**:通过原型,对象可以访问其构造...

    JS弹性导航条---面向对象

    综上所述,"JS弹性导航条---面向对象"是一个关于如何利用JavaScript的面向对象特性来创建一个灵活、可扩展的导航条组件的实践。通过构造函数、原型方法和事件处理,我们可以创建一个不仅能满足基本导航功能,还能...

    JS删除对象中某一属性案例详解

    本文主要讲解了如何在JavaScript中删除对象的某个属性,并通过实际案例详细解释了delete操作符的使用方法。在JavaScript中,delete操作符主要用于删除对象的属性。如果操作成功,delete会返回true,否则返回false。...

Global site tag (gtag.js) - Google Analytics