function objxy(n){

    var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight
    if(o.getBoundingClientRect)
    {
        x=o.getBoundingClientRect().left+document.body.scrollLeft
        y=o.getBoundingClientRect().top+document.body.scrollTop
    }
    else
    {
        while(o!=null && o.tagName.toUpperCase()!="BODY")
        {
            x+=o.offsetLeft
            y+=o.offsetTop
            o=o.offsetParent
        }
    }
    return [x,y,w,h]
}      

1、getBoundingClientRect: 这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0,IE为2 在火狐的firebug中输入document.documentElement.clientTop就能看的返回值为0

2、scrollTop:第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度

3、兼容解决 obj.offsetTop 指 obj 距离上方或上层控件的位置;利用while循环,来进行累加。offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。parentObj = element.offsetParent

4、总结

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

获取当前元素节点的position和宽高(兼容)的更多相关文章

  1. 获取iframe子页面节点,响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  2. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  3. 获取子元素节点(children,childNodes)

    在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...

  4. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  6. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  7. 绝对定位元素left、right、top、bottom值与其margin和宽高的关系

    绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...

  8. JavaScript DOM操作之查找元素节点

    概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...

  9. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

随机推荐

  1. 数学(线性规划):UVAoj 10498 Happiness

    Problem GHappiness! Input: standard inputOutput: standard outputTime Limit: 3 seconds Prof. Kaykobad ...

  2. Java---实现运行任意目录下class中加了@MyTest的空参方法(实现图形界面)

    说明: 因为上个代码,总是要输入完整的绝对路径,比较麻烦,于是,就写了这个小程序,直接进入文件对话框选择需要运行的class文件. 只需要提前输入完整的类名. 注意:加的MyTest必须打个包,加上: ...

  3. Piggy-Bank(完全背包)

    /* http://acm.hdu.edu.cn/showproblem.php?pid=1114 完全背包问题 再判断背包能否装满 题意: 给出存空钱罐的重量以及装满时的重量 给出每种硬币的面值以及 ...

  4. python 几种常见的测试框架

    1. unittest 参考文档: https://docs.python.org/3/library/unittest.html The unittest unit testing framewor ...

  5. 【Cocos2d-X开发学习笔记】第26期:游戏背景之滚动地图背景(CCParallaxNode)的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 在现实生活中,当我们身处一辆快速行驶的车上,用眼 ...

  6. 安卓ListView操作的两种方法

    举例做一个微信的中间部分(好友消息等信息通知) 第一种:BaseAdapter() package com.example.wx; import java.util.ArrayList;import ...

  7. PHP安全编程:更优的会话数据安全 更好地防范session暴露(转)

    当你关注于防止源码的暴露时,你的会话数据只同样存在着风险.在默认情况下,SESSION保存在/tmp目录下.这样做在很多情形下是很方便的,其中之一是所有用户都有对/tmp的写入权限,这样Apache同 ...

  8. is not in the sudoers file.This incident will be reported

    解决方法如下: 1>.进入超级用户模式.也就是输入"su -",系统会让你输入超级用户密码,输入密码后就进入了超级用户模式. 2>.添加文件的写权限.也就是输入命令&q ...

  9. [转] C语言多维数组与多级指针

    http://c.biancheng.net/cpp/html/477.html 多维数组与多级指针也是初学者感觉迷糊的一个地方.超过二维的数组和超过二级的指针其实并不多用.如果能弄明白二维数组与二级 ...

  10. 一行代码实现iOS序列化与反序列化

    一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...