javascript - 如何在javascript函数中获取当前HTML元素的高度和宽度属性

Question

我想访问当前 html img 元素的高度和宽度属性，以根据属性动态应用 ngClass。

我有这个html代码

<div class="cfg-pg-outer-box" ng-repeat="album in album_list">
    <div class="cfg-pg-photo-box">
        <img ng-src="{{album.thumbnail.image_path}}" ng-class="myclass(this)">
    </div>
</div>

我正在使用 AngularJS 动态应用 ngClass

$scope.myclass = function(element) {    
    return (element.width > element.height ? 'landscape' : 'portrait');
}

我无法读取宽度和高度属性。你有什么建议吗？

Answer 1

您尝试的问题在于，与 onclick 等常规 HTML 事件属性不同，ngClass 和类似属性具有不同的调用上下文。确切地说，this 指向当前作用域对象。

在您的情况下，您应该编写一个自定义指令来读取/操作 DOM 元素。例如简单的指令可以是这样的:

app.directive('dimentionClass', function() {
    return {
        link: function(scope, element) {
            var img = element[0];
            img.onload = function() {
                img.className = img.width > img.height ? 'landscape' : 'portrait';
            }
        }
    };
});

你会像这样使用它:

<img ng-src="{{album.thumbnail.image_path}}" dimention-class />

演示: http://plnkr.co/edit/GtklqTUvtbFxb6AFuz4S?p=preview