Get elements properties(height/width) without using Directives in AngularJS

Question

In angularJS we can use Directives to access the elements and we can set properties using these Directives. I want to get/set some properties for DOM elements without using Directives.

<div class=main ng-app="myApp" ng-controller="SalesController">
    <div class=ele1> </div>
    <div class=ele2> </div>
    <div class=ele3></div>
</div>

In some places I want the height of some elements to do some calculations:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
    //this code not working
    document.getElementsByClassName("ele1").clientHeight;
});

I know how to get the height by using directives but in some case we need height/width of div elements in different part of the project, adding directive every time will increase the code.

Is there a single line way to find the height/width of a div in angularjs (like $("classname").height() in jquery)? I would prefer to do so without using jQuery.

Why your CLASS name is different like ele1,ele2,ele3? You should use same CLASS name of your DOM element. Because many DOM element can have same CLASS. But ID is Unique for a HTML page — Sumon Sarker
– Sumon Sarker, Commented Oct 20, 2016 at 14:43
@SumonSarker: Here i used same class name for simple example,,,thanks for your support... — user3501613
– user3501613, Commented Oct 23, 2016 at 13:06
@ZeRubeus: I need to get element randomly, i can't use $element[0] like this because in some case i will create UI dynamically.... whether i can use $element for that purpose... eg: i have some 10 child div inside one parent div and i don't know the correct position of the required child div it may be in 0 or 1 or 5th position so in this case how i will use $element to access that object, please help me — user3501613
– user3501613, Commented Oct 23, 2016 at 13:24

Sumon Sarker · Accepted Answer · 2016-10-20 14:32:14Z

1

You can find height/width of DOM elements using JavaScript loops.

Example:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
  var objects = document.getElementsByClassName('YOUR_CLASS_NAME');
  var height = 0;
  for(var i=0;i<objects.length;i++){
    height = objects[i].clientHeight;
    console.log(height); /*Output in JS console*/
    alert(height); /*Output in window alert Box*/
  }
});

Note : document.getElementsByClassName() function return Object Array.

document.getElementById() return single Object. You can't use clientHeight property directly in Object Array selector. Because clientHeight is a single Object Property.

Some other JavaScript DOM selector function

document.getElementById() /*Return single Object*/
document.getElementsByTagName() /*Return Object Array*/
document.getElementsByTagNameNS()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
....

edited Oct 20, 2016 at 14:32

answered Oct 20, 2016 at 14:26

Sumon Sarker

2,7971 gold badge27 silver badges37 bronze badges

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

1 Comment

shershen Over a year ago

also element.getBoundingClientRect().height may come handy - stackoverflow.com/questions/32438642/…

Rahi.Shah · Accepted Answer · 2017-07-05 07:02:15Z

1

we can access the element by using javascript or by angular js, In above answer, they are using javascript to access the elements.In angular js, we can inject $element in controller and we can access any elements by using class or id

myApp.controller('SalesController',function($scope,$element){
 //here we are using 2 indexes but that is not the position index of child elements
 var temp=$element[0].getElementsByClassName('ele1')[0].clientHeight;
 });

edited Jul 5, 2017 at 7:02

Rahi.Shah

1,31311 silver badges20 bronze badges

answered Oct 24, 2016 at 10:22

user3501613

6402 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

Get elements properties(height/width) without using Directives in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related