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. 数据结构(虚树,动态规划):HNOI 2014 世界树

    Hnoi2014 世界树 Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平 ...

  2. 动态规划 计数型DP:dobra

    令人愉快的单词(dobra)时间限制: 0.1 秒空间限制: 32 MB [问题描述]Lea 在她的一生中碰到过很多单词.其中的很大一部分都使她不愉快.作为补偿,她开始创造一些愉快的单词. Lea 通 ...

  3. 【模拟】Codeforces 699A Launch of Collider

    题目链接: http://codeforces.com/problemset/problem/699/A 题目大意: 给N个点,向左或向右运动,速度均为1,问最早什么时候有两个点相撞.无解输出-1 题 ...

  4. 《A First Course in Probability》-chaper6-随机变量的联合分布-独立性

    在探讨联合分布的时候,多个随机变量之间可以是互相独立的.那么利用独立性这个性质我们就能够找到一些那些非独立随机变量没有的求解概率的方法. 对于离散型随机变量的独立联合分布: 离散型随机变量X.Y独立, ...

  5. openStack 云平台管理节点管理网口流量非常大 出现丢包严重 终端总是时常中断问题调试及当前测试较有效方案

    tuning for Data Transfer hosts connected at speeds of 1Gbps or higher <一.本次OpenStack系统调试简单过程简单记录& ...

  6. selenium python presence_of_element_located vs visibility_of_element_located

    背景: 用WebDriverWait时,一开始用的是presence_of_element_located,我对它的想法就是他就是用来等待元素出现.结果屡屡出问题.元素默认是隐藏的,导致等待过早的就结 ...

  7. sqlserver使用户只能在某个架构下建立表和存储过程

    1.首先,建立一个用户之后,默认的架构是dbo,默认的角色是public.这种情况下,这个用户将看不到dbo以及其他架构下的对象.除非单独进行授权.   2.新建一个架构test,然后使得这个架构的所 ...

  8. javaIO流小结(1)

    UTF-8的字节占多少个字节? 常用中文字符用utf-8编码占用3个字节(大约2万多字),超大字符集中要占4个字节.在内存中是2个字节,真正写到硬盘上面的是3个字节. GBK.GB2312汉字占2个字 ...

  9. jeecms v7

    http://bbs.jeecms.com/res_base/jeecms_com_bbs/upload/2015_11/jeecmsv7.zip 安装包 http://bbs.jeecms.com/ ...

  10. selenium webdriver启动Chrome浏览器后无法输入网址的解决办法

    通过selenium webdriver启动Chrome浏览器,脚本如下: from selenium import webdriver browser = webdriver.Chrome() br ...