CODEWITHSUNDEEP
javascripthtmlcssangularjs
CoderPJ
CoderPJ

Reputation: 1011

How to dynamically get the content width of a div?

I am developing an application in AngularJS. I have a div that looks like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div class="role">
  Sign Up
</div>

How can I find out the div content width dynamically, based on screen size? Like in the picture below, Sign Up's width is 52.36px

enter image description here

Would appreciate any help. Thanks!

Upvotes: 0

Views: 697

Answers (1)

Omn
Omn

Reputation: 3070

As @Roko C. Buljn commented, this is pretty easy:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div id="foobar" class="role">
  Sign Up
</div>
<script>
  console.log(document.getElementById("foobar").getBoundingClientRect().width)
  console.log(document.getElementById("foobar").clientWidth)
  console.log(document.getElementById("foobar").offsetWidth)
</script>

Upvotes: 1

Related Questions