美文网首页
获取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