How can I get the width of an element using AngularJS?

Question

I realise I can use jQuery to get the width of an element, but I'm curious; is there a way to do so using AngularJS?

is css gives the right value for box-resizing situations or with auto calculated widths? — Lupus
– Lupus, Commented Feb 4, 2014 at 4:51
try $('element').width(); in js.. replace element with use of your ID or class. Reference : api.jquery.com/width — Moorthy GK
– Moorthy GK, Commented Feb 4, 2014 at 4:52
@MoorthyGK there is no Sizzle library (for selectors) nor there is no width plugin in jQLite. Pls read the question before answering. — Lupus
– Lupus, Commented Feb 4, 2014 at 4:57
Or you can use getBoundingClientRect. It will give you a width as well as other useful numbers. — dfsq
– dfsq, Commented Feb 4, 2014 at 4:58

Pau Fracés · Accepted Answer · 2014-10-23 17:58:10Z

39

Native JS (#id):

document.getElementById(id).clientWidth;

Native JS (querySelector (class, id, css3 selector)):

document.querySelectorAll(".class")[0].clientWidth;

Plugging this into angular.element:

angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;

If you need to get non rounded numbers, use getBoundingClientRect.

angular.element(document.getElementById(id)).getBoundingClientRect();

Some resources on the subject:

If this floats your boat in terms of syntax and the no-need to plug jQuery into the mix, be wary of cross browser hell.

edited Oct 23, 2014 at 17:58

Pau Fracés

1,15311 silver badges24 bronze badges

answered Feb 4, 2014 at 6:14

user1364910

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

2 Comments

Zach Lysobey Over a year ago

Maybe I'm missing something, but the angular.element examples don't work for me. I think you need to unwrap the DOM element from its jqLite wrapper in order to access basic DOM methods/properties. i.e. angular.element(document.getElementById(id))[0].clientWidth;, NOT angular.element(document.getElementById(id)).clientWidth; This of course makes the whole angular.element thing in this example silly, but it is necessary to do something like this to get at the vanilla dom element from, say, a link functions element.

azuax Over a year ago

@ZachLysobey is right...at least in Chrome, you need to select the first element: angular.element(document.getElementById(id))[0].clientWidth

Post Impatica · Accepted Answer · 2016-02-12 03:20:50Z

11

If you've been scratching your head like me over all these suggestions and they don't work, i found i had to set a timeout. I'm not sure why, maybe because i'm using material design attributes on my divs.

setTimeout(function(){
     var divsize = angular.element(document.getElementById('fun_div')).prop('offsetWidth');   
     console.log('Width of fun_div: ' + divsize);
    },50);

edited Feb 12, 2016 at 3:20

answered Feb 11, 2016 at 20:33

Post Impatica

16.7k11 gold badges73 silver badges86 bronze badges

2 Comments

HammerNL Over a year ago

Using setTimeout for this purpose is not a good idea. In this case you assume the browser will have finished rendering everything you need within 50ms. I'm sure a modern PC can handle that, but what about a budget smartphone? Use Angulars $timeout instead, it guarantees all rendering has finished, before calling your function.

Post Impatica Over a year ago

@HammerNL I agree.

Collectives™ on Stack Overflow

How can I get the width of an element using AngularJS?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related