如何在javascript函数中获取当前HTML元素的height和width属性

Question

我想访问当前html img元素的height和width属性，以基于该属性动态应用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');
}

我无法读取width和height属性。 你有什么建议吗？

Answer 1

您尝试的问题在于，与常规HTML事件属性（如onclick ， ngClass等）不同， 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

Answer 2

使用element.offsetWidth和element.offsetHeight

Answer 3

var height = document.body.clientHeight;
var width = document.body.clientWidth;

说明

编辑：

为了回应您的评论，请尝试使用：

var element = document.getElementById("elementId");

var height = element.style.height;
var width =  element.style.width;

EDIT2：

您可能还想尝试：

document.getElementById(id_attribute_value).offsetHeight;

和/或

document.getElementById(id_attribute_value).clientHeight;

Answer 4

var width = document.getElementById('<Element's ID>').offsetWidth;
var height= document.getElementById('<Element's ID>').offseHeight;

Answer 5

您需要使用$ scope。$ apply，否则在非Angular事件处理程序中对$ scope所做的任何更改将无法正确处理：

$ scope.myclass = function（element）{

$scope.image.width = img.width;
$scope.image.height = img.height;
$scope.image.path = $scope.imageurl;
$scope.$apply();

   return (this.width > this.height ? 'landscape' : 'portrait');

}