如何像在 JQuery 中一样在 AngularJS 中获得高度？答案

【问题标题】：How to get height in AngularJS like in JQuery?如何像在 JQuery 中一样在 AngularJS 中获得高度？
【发布时间】：2015-11-28 13:23:49
【问题描述】：

我在下面有这个 jquery sn-p：

  $(document).ready(function() {
    var height = Math.max($("#one").height(), $("#two").height());
    $("#one").height(height);
    $("#two").height(height);
});

我想将其转换为 AngularJS，但我在实际获取高度时遇到了问题。我尝试了很多不同的东西，包括 offsetHeight 和 scrollHeight，它们都返回 0。是因为我使用的是表格吗？我不知道该怎么做/如果我做得对。以下是我迄今为止一直在尝试做的事情的大纲：

 $scope.height = function()
{
    var height = window.Math.max(HEIGHT OF MY ELEMENT "firstTable", HEIGHT OF MY ELEMENT "secondTable");
    //Now get the height and set it.
};

我不确定是否应该把它变成一个指令并将它放在我的表中（我可以访问 $element）或什么。

提前致谢

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

我建议使用普通的旧 javascript 来执行此操作。

看起来效果不错：

document.getElementById('someDiv').clientHeight;
// clientHeight includes the height and vertical padding.
document.getElementById('someDiv').offsetHeight;
// offsetHeight includes the height, vertical padding, and vertical borders.
document.getElementById('someDiv').scrollHeight;
// scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

在 Stackoverflow 上找到解决方案：CSS / JavaScript - How do you get the rendered height of an element? 所以我没有任何优点；）。

【讨论】：

【解决方案2】：

jqLite（包含在 Angular 中）受到限制，不提供计算高度的功能。

您最好的选择是将element 注入控制器，并通过以下方式获取高度：

element[0].offsetHeight;

plnkr 上的演示：http://plnkr.co/edit/g45SX4unuCNwlVIUEw4j?p=preview

【讨论】：

【解决方案3】：

您要寻找的不是使用 AngularJS 来获取高度，而是使用 native JavaScript。

使用document.getElementById() 选择您的元素，然后使用.offsetHeight 获取高度，最后使用.style.height 设置您的高度。

您的代码看起来有点像这样：

var elementOne = document.getElementById("one"),
    elementTwo = document.getElementById("two"),
    height = Math.max(elementOne.offsetHeight, elementTwo.offsetHeight);
elementOne.style.height = height;
elementTwo.style.height = height;

请注意，我为每个元素创建了变量，以避免通过 document.getElementById() 重复检索元素以获取和设置高度。

【讨论】：