How to get Current HTML element height and width property in javascript function

Question

I want to access height and width property of current html img element to apply ngClass dynamically based on property.

I have this code for 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>

I am using AngularJS to apply ngClass dynamically

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

I am not able to read width and height properties. Do you have any suggestion?

Does album.thumbnail object have this information maybe like height/width? Do you really need to read it from image object? — dfsq
– dfsq, Commented Feb 19, 2015 at 6:49
@Dr.Molle element.offsetWidth/element.offsetHeight giving undefined — Shivagoy
– Shivagoy, Commented Feb 19, 2015 at 6:52

dfsq · Accepted Answer · 2015-02-19 07:00:36Z

2

The problem with your attempt is that unlike regular HTML event attributes like onclick, ngClass and similar have different context of invocation. To be exact this points to current scope object.

In your case you should write a custom directive to read/operate with DOM element. For example simple directive can look like:

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

and you will use it like this:

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

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

edited Feb 19, 2015 at 7:00

answered Feb 19, 2015 at 6:55

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Tilikin · Accepted Answer · 2015-02-19 06:51:39Z

1

use element.offsetWidth and element.offsetHeight

answered Feb 19, 2015 at 6:51

Ivan Tilikin

1031 silver badge7 bronze badges

2 Comments

Shivagoy Over a year ago

Giving undefined inside $scope.myclass function.

Ivan Tilikin Over a year ago

try element[0].offsetWidth

Dev Logicbox · Accepted Answer · 2015-02-19 07:00:45Z

1

You need to use $scope.$apply, otherwise any changes to $scope made in non-Angular event handlers won't be processed properly:

$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');

}

answered Feb 19, 2015 at 7:00

Dev Logicbox

513 bronze badges

Comments

Jesper · Accepted Answer · 2015-02-19 07:25:54Z

1

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

edited Feb 19, 2015 at 7:25

Jesper

4,5552 gold badges25 silver badges34 bronze badges

answered Feb 19, 2015 at 6:58

Chaitanya

773 silver badges8 bronze badges

Comments

Rahul Desai · Accepted Answer · 2015-02-19 07:01:09Z

0

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

Explanation

EDIT:

In response to your comment, try using:

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

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

EDIT2:

You might also wanna try:

document.getElementById(id_attribute_value).offsetHeight;

and/or

document.getElementById(id_attribute_value).clientHeight;

edited Feb 19, 2015 at 7:01

answered Feb 19, 2015 at 6:54

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

1 Comment

Shivagoy Over a year ago

I believe it gives height/width of whole window , but I needs height/width of that element only.

Collectives™ on Stack Overflow

How to get Current HTML element height and width property in javascript function

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related