在 AngularJS 中不使用 JQuery 获取 HTML 元素高度

Posted 2023-02-19

【中文标题】在 AngularJS 中不使用 JQuery 获取 HTML 元素高度

【英文标题】：Get HTML Element Height without JQuery in AngularJS

【发布时间】：2014-03-20 16:24:01

【问题描述】：

我正在熟悉 AngularJS。我尽量做到“纯粹”。出于这个原因，我试图避免包括 jQuery。但是，我在获取 html 元素的高度时遇到了挑战。目前，我正在尝试以下方法：

angular.module('myModule', [])
  .directive('myDirective', function() 
    return 
        restrict: 'A',
        link: function(scope, element) 
            console.log(element.css('height'));
        
    ;
  )
;

但是，当执行此代码时，控制台会写入一个空行。我正在尝试显示元素的高度。有没有办法在不使用 jQuery 的情况下在 AngularJS 中做到这一点？

谢谢！

【参考方案1】：

如果您使用，这似乎可以正常工作并给出相同的结果：

element.style.height

由于没有在元素上设置内联样式或 CSS 高度，因此会显示一个空行。您可以直接获取 HTML 元素的高度，而不是依赖样式。

console.log(element[0].offsetHeight);

http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview

How do I retrieve an HTML element's actual width and height?

【讨论】：

这对我有用！我试图从使用angular.element('#header').height() 的应用程序中删除jQuery。你可以用angular.element(document.querySelector('#header'))[0].offsetHeight 做同样的事情。谢谢！

您可能关心也可能不关心这个，但document.getElementById 在性能方面会比 ID 的 querySelector 更好。

我无法复制它来展示。我遇到的问题是使用 ng-repeat 渲染的元素和相同的元素，但静态元素具有不同的高度。原因可能不同。加载时间？我的意思是，一个人需要从 javascript 中获取内容来设置 DOM，而另一个人则可以将其一目了然。如果是这种情况，是否有一些解决方法？

【参考方案2】：

angular 提供的围绕元素的小包装器允许您请求属性，所以：

element.prop('offsetHeight');

可以正常工作，请参阅：http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview

【讨论】：

谢谢兄弟，你拯救了我的一天:)