计算角度div1和div2之间的距离

Question

我用了这段代码。

Math.abs($('.hd-termometro').offset().top - $('.ft-termometro').offset().top);

尝试获取2格之间的距离。 我使用此代码执行此操作，但是我的页面自动刷新并且第二个div为零。 还有另一种计算距离α的方法。

我在jquery中做到了。 也许还有另一种方法。

Answer 1

通常，我这样做是为了调整中间尺寸以将页脚推到页面底部。

为此，我使用window.height，并删除了页眉和页脚元素的高度。 然后，我将侦听器绑定到对象窗口的resize事件，以在需要时重新计算高度。

如果要使其通用，则意味着要获取父组件的高度并减去第一个和最后一个，然后在父元素的整个高度上添加一个$ watch。

但是，javascript（甚至jquery）中的height和width属性很棘手。 他们不计算元素占用的整个高度。 边距和边框不包括在内。

因此，为了获得正确的东西，您必须使用内部填充物包裹元素

<section id="header">
    <div id="header-content">[content]</div>
</section>

标头具有填充属性（如果需要），标头内容具有边框（如果需要）。 然后，您可以通过查找height元素来获取标题的高度。

这与angular并没有任何关系，唯一的是$ watch部分来检测更改。 但如果是像我这样的页眉/页脚，则可以使用原始javascript监听窗口调整大小。

Answer 2

在函数中执行它，以便您可以重用它

function getDistance() { 
    var div1 = $('.hd-termometro');
    var div2 = $('.ft-termometro');
    return div2.offset().top - (div1.offset().top + div1.height())
}

第一次使用

$scope.distance = getDistance();

距离改变时更新范围

$(window).resize(function(){
   $scope.distance = getDistance();
});