Get HTML Element Height without JQuery in AngularJS

Question

I'm getting familiar with AngularJS. I'm trying to be as 'pure' as I can. For that reason, I'm trying to avoid including jQuery. However, I'm having a challenge getting an HTML element's height. Currently, I'm trying the following:

angular.module('myModule', [])
  .directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            console.log(element.css('height'));
        }
    };
  })
;

However, when this code gets executed, an empty line gets written to the console. I'm trying to display the height of the element. Is there a way to do this in AngularJS without using jQuery?

Thank you!

Community · Accepted Answer · 2017-05-23 11:54:30Z

61

It appears this is working correctly and gives the same result if you use:

element.style.height

Since no inline style or CSS height is set on the element a blank line is shown. Instead of relying on the style you can get the HTML elements height directly.

console.log(element[0].offsetHeight);

http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview

How do I retrieve an HTML element's actual width and height?

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 20, 2014 at 0:44

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

3 Comments

Jake McGuire Over a year ago

This worked for me! I was trying to remove jQuery from my application, which was using angular.element('#header').height(). You can do the same thing with angular.element(document.querySelector('#header'))[0].offsetHeight. Thanks!

Gary Justin Over a year ago

You may or may not care about this, but document.getElementById would be better in terms of performance than querySelector for an ID.

Eugene Over a year ago

I was unable to reproduce it to show. Issue I'm having is that element rendered with ng-repeat and same, but static element have different height. Can the reason be diff. load time? What I mean is, that one needs to get content from Javascript to set DOM and the other has it in plain sight. Is there some workaround for that if that is the case?

IxDay · Accepted Answer · 2014-08-21 17:25:35Z

23

The small wrapper around element provided by angular allows you to ask for properties, so:

element.prop('offsetHeight');

Will just work fine, see: http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview

answered Aug 21, 2014 at 17:25

IxDay

3,7072 gold badges25 silver badges27 bronze badges

Collectives™ on Stack Overflow

Get HTML Element Height without JQuery in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related