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

Posted 2023-03-10

【中文标题】使用javascript在html页面中查找元素的位置[重复]

【英文标题】：Finding the position of an Element in a html page using javascript [duplicate]

【发布时间】：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 jqLit​​e find() - 仅限于按标签名称查找。见Angulars jqLite

【参考方案1】：

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

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

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

【讨论】：

它有效。但我不想将 jquery 与 angularjs 一起使用。如何在严格的 angularjs 中做到这一点？

@MukundGandlur 你标记了 angularjs，也许你应该附加你的问题来明确说不要使用 angularjs

@MukundGandlur：如果您正在寻找纯角度解决方案，您可能想看看这个：***.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