Question

我有一个简单的Html元素，我从一个指令中访问：

<div scroll-item ng-repeat="post in posts">
...
app.directive("scrollItem", function($window){
    return {
        link : function($scope, $element, $att) {
            console.log($element[0].clientHeight);
            console.dir($element[0]);
        }
    }
});

两种不同的日志会产生不同的结果。当我查看第二个日志中找到的对象时，clientHeight返回166;这是正确的，但在第一个日志中，它返回201.它怎么可能产生这种不一致的结果？

我无法用这个简单的小提琴重现这个问题：http://jsfiddle.net/9noo4uc5/1/ 什么可能导致这样的问题？

Answer 1

任何元素的客户端高度都会返回元素的内部高度，因此不必每次都返回相同的值。每个元素里面都有更多的文本，这意味着更多的clientHeight。

对于没有CSS或内联布局框的元素，Element.clientHeight只读属性为零，否则它是元素的内部高度（以像素为单位），包括填充但不是水平滚动条高度，边界或边缘。源：https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

myApp.directive("scrollItem", function(){
    return {
        link : function($scope, $element, $att) {
          $element.on('click',function(){
           console.log(this.clientHeight);
          })
        }
    }
});

当你点击最后一个元素时，看到这个小提琴它会返回不同的innerHeight： http://jsfiddle.net/9noo4uc5/6/

Html Element ClientHeight返回不一致的值

1 个答案: