element.offsetLeft和jQuery的element.offset()之间有什么区别?

时间:2015-05-18 14:47:02

标签: javascript jquery css

这两者之间的主要区别是什么?似乎有时浏览器接受jQuery的element.offset()而不是典型的element.offsetLeft

这个代码的非常好的例子是

  (function () {

    var mX, mY, distance,
    $distance = $('#distance span'),
        $element = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
    }

    $(document).mousemove(function (e) {
        mX = e.pageX;
        mY = e.pageY;
        alert(mX);
        alert((mX - ($element.offsetLeft + ($element.width() / 2))));
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);
    });

})();

如果你将elem.offset()。left替换为elem.offsetLeft或$ element.offsetLeft,则返回NaN,如果你只是提醒offset(),则返回。左//返回182.5或alert offsetLeft //返回183什么是魔法背后呢?

来自css-tricks http://jsfiddle.net/chriscoyier/t5Kts/

演示

1 个答案:

答案 0 :(得分:1)

jQuery offset()给出了元素相对于文档根的位置。 element.offsetLeft给出相对于其父元素的左侧位置。

要将element.offsetLeft与jQuery一起使用,您需要访问实际的DOM元素,而不是元素的jQuery对象表示:

$element[0].offsetLeft