美文网首页
获取div的坐标以及大小方法

获取div的坐标以及大小方法

作者: 林小刀2_0 | 来源:发表于2017-08-18 18:24 被阅读0次

html部分:

    <div  id='divId' style="left: 150px; top: 280px; width: 100px; height: 100px;
background: none; text-align: center">
        </div>

js部分:

    var obj = document.getElementById('divId');
    var x = GetObjPos(obj)['x'];
    var y = GetObjPos(obj)['y'];
    var width = parseInt(obj.style.width);
    var height = parseInt(obj.style.height);


    /**
     * 坐标
     * @param x
     * @param y
     * @return
     */
    function CPos(x, y) {
        this.x = x;
        this.y = y;
    }
    /**
     * 得到对象的相对浏览器的坐标
     * @param ATarget
     * @return
     */
    function GetObjPos(ATarget) {
        var target = ATarget;
        var pos = new CPos(target.offsetLeft, target.offsetTop);

        var target = target.offsetParent;
        while (target) {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;

            target = target.offsetParent
        }
        return pos;
    }

这里要注意的是:获取div必须使用id,并且用原生js,才有效,使用class或者jq的方法都无效。
原因是*.style.width和obj.style.height要通过id才能捕捉,而这种方法只有原生js才能使用。

相关文章

网友评论

      本文标题:获取div的坐标以及大小方法

      本文链接:https://www.haomeiwen.com/subject/hqoarxtx.html