Question

JavaScript 脚本如何获取到一个图片的左上角的绝对位置

Answer 1

你说的绝对位置有三种情况：

 

1、相对父层

2、相对视窗

3、相对页面

 

<script type="text/javascript">

window.onload = function() {

    var img = document.getElementById("img");

 

    // 相对父层

    var top_rel_to_parent = img.offsetTop;

    var left_rel_to_parent = img.offsetLeft;

 

    // 相对页面

    function getNodePosition(node) {     

        var top = left = 0;

        while (node) {   

            if (node.tagName) {

                top = top + node.offsetTop;

                left = left + node.offsetLeft;   

                node = node.offsetParent;

            }

            else {

                node = node.parentNode;

            }

        } 

        return [top, left];

    }

 

    var top_rel_to_doc = getNodePosition(img)[0];

    var left_rel_to_doc = getNodePosition(img)[1];

 

    // 相对视窗

    function getScroll() {

        if(typeof pageYOffset !=  'undefined') {

            return [pageYOffset, pageXOffset];

        }

        else {

            var B = document.body;

            var D = document.documentElement;

            D = (D.clientHeight) ? D : B;

            return [D.scrollTop, D.scrollLeft];

        }

    }

 

    var top_rel_to_viewport = top_rel_to_doc - getScroll()[0];

    var left_rel_to_viewport = left_rel_to_doc - getScroll()[1];

};

</script>

 

Answer 2

function getOffset(img){
var offset = {left:0,top:0};
while(img){
offset.left += img.offsetLeft;
offset.top += img.offsetTop;
img = img.offsetParent;
};
return offset;
}