使用javascript在html页面中查找元素的位置[重复]答案

【问题标题】：Finding the position of an Element in a html page using javascript [duplicate]使用javascript在html页面中查找元素的位置[重复]
【发布时间】：2016-07-01 10:08:18
【问题描述】：

我正在尝试使用 $document.find 获取元素在 html 页面中的位置。但是，它始终是未定义的。

这是我的代码。

angular.module('MyApp', []).
controller('myController', function($scope, $document) {

var element = $document.find('my_element');
console.log(element.prop('offsetTop'));
console.log(element.offsetTop);
});

这是html页面。

<div ng-app="MyApp" ng-controller="driversController">
  <div id="my_element">Looping with ng-repeat:</div>
  .......
</div>

我不想将 jquery 与 angularjs 一起使用。 P;ease 建议一种在 angularjs 中执行此操作的方法。谢谢

【问题讨论】：

jQuery .offset() 应该可以工作
@PankajParkar 但我不想将 jquery 与 angularjs 一起使用。如何在 angularjs 中做到这一点？
知道了..看看我添加的答案..谢谢:-)
AngularJS jqLite find() - 仅限于按标签名称查找。见Angulars jqLite

标签： javascript jquery html css angularjs

【解决方案1】：

使用 jquery .offset() 查找位置。

var offSet = $("#my_element").offset();
console.log(offSet.top);

例如：https://jsfiddle.net/o9krfznt/1/

【讨论】：

它有效。但我不想将 jquery 与 angularjs 一起使用。如何在严格的 angularjs 中做到这一点？
@MukundGandlur 你标记了 angularjs，也许你应该附加你的问题来明确说不要使用 angularjs
@MukundGandlur：如果您正在寻找纯角度解决方案，您可能想看看这个：stackoverflow.com/questions/18953144/…。还要从问题标签中删除标签 jquery。
将此标记为答案，因为您评论中的帖子对我有帮助。

【解决方案2】：

通过使用原生 JavaScript，您可以通过 element[0] 访问 DOM 中的偏移值。

var element = $document.find('my_element');
console.log(element.prop('offsetTop'));
console.log(element[0].offsetTop);
console.log(element[0].offsetLeft);

【讨论】：

其打印“未定义”。我将添加一个 plunkr。
这是我的 plunkr - plnkr.co/edit/vKD8DSSdw95WtPq4kUwp.

【解决方案3】：

您可以遍历页面中的每个元素，直到找到您想要的元素。

        function left_on(el)
        {    
                for (var lx=0, ly=0;
                     el != null;
                     lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
            return lx  ;// or ly 
        }

【讨论】：