zoukankan      html  css  js  c++  java
  • JavaScript获取元素在浏览器画布中的绝对位置

    JavaScript获取元素在浏览器画布中的绝对位置

    JavaScript中提供获取HTML元素位置的属性:
    HTMLElement.offsetLeft
    HTMLElement.offsetHeight
    但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,前一阵找到的一个比较好的函数,分享一下:

    //获取元素的纵坐标
    function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
    return offset;
    }
    //获取元素的横坐标
    function getLeft(e){
    var offset=e.offsetLeft;
    if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
    return offset;
    }

    其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。

  • 相关阅读:
    BZOJ2039: [2009国家集训队]employ人员雇佣
    BZOJ2542: [Ctsc2001]终极情报网
    BZOJ2140: 稳定婚姻
    BZOJ3280: 小R的烦恼
    BZOJ3258: 秘密任务
    BZOJ2400: Spoj 839 Optimal Marks
    BZOJ3171: [Tjoi2013]循环格
    BZOJ1758: [Wc2010]重建计划
    BZOJ3175: [Tjoi2013]攻击装置
    机房破解程序
  • 原文地址:https://www.cnblogs.com/Candy/p/1193769.html
Copyright © 2011-2022 走看看