dom对象的坐标 怎样转化屏幕坐标

Question

dom对象的坐标 怎样转化屏幕坐标

Answer 1

《javascript高级程序设计》中提供了两个方法：

        function getElementTop(element) {
            var actualTop = element.offsetTop,
                current = element.offsetParent;
            while (current !== null) {
                actualTop += current.offsetTop;
                current = current.offsetParent;
            }
            return actualTop;
        }

        function getElementLeft(element) {
            var actualLeft = element.offsetLeft,
                current = element.offsetParent;
            while (current !== null) {
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }
            return actualLeft;
        }

用到dom对象的3个属性

offsetLeft：元素左外边框到包含元素的左内边框的像素数
offsetTop：元素上外边框到包含元素的上内边框的像素数
offsetParent：包含元素

所以把这个元素的offsetLeft/offsetTop和其包含元素的offsetLeft/offsetTop相加，如此循环直到根元素，就可以得到一个基本准确的值。

在chrome下测试没问题。这样取到的actualTop和actualLeft是元素相对浏览器窗口的top和left，一般够用了。
如果要转化成坐标，取个原点，计算一下吧。