How to find the width of a div using vanilla JavaScript

Question

How do you find the current width of a  lt div gt  in a cross-browser compatible way without using a library like jQuery

User · Accepted Answer

document getElementById  mydiv   offsetWidth    element offsetWidth  MDC

User · Answer

call below method on div or body tag onclick  show event    function show event             var x   event clientX          var y   event clientY           var ele   document getElementById  tt            var width   ele offsetWidth          var height   ele offsetHeight          var half  width 2          if x gt half                          alert  right click                gallery next                      else                          alert  left click                gallery prev

User · Answer

Another option is to use the getBoundingClientRect function  Please note that getBoundingClientRect will return an empty rect if the element s display is  none    var elem   document getElementById  myDiv    if elem       var rect   elem getBoundingClientRect       console log rect width

User · Answer

You can use clientWidth or offsetWidth Mozilla developer network reference  It would be like   document getElementById  yourDiv   clientWidth     returns number  like 728   or with borders width    document getElementById  yourDiv   offsetWidth     728   borders width

User · Answer

You can also search the DOM using ClassName  For example    document getElementsByClassName  myDiv     This will return an array   If there is one particular property you are interested in  For example    var divWidth   document getElementsByClassName  myDiv   0  clientWidth    divWidth will now be equal to the the width of the first element in your div array

User · Answer

The correct way of getting computed style is waiting till page is rendered  It can be done in the following manner  Pay attention to timeout on getting auto values   function getStyleInfo         setTimeout function             const style   window getComputedStyle document getElementById    root               if  style height     auto                 getStyleInfo                         IF we got here we can do actual business logic staff         console log style height  style width          100       window onload function     getStyleInfo         If you use just   window onload function         var computedStyle   window getComputedStyle document getElementById    root           you can get auto values for width and height because browsers does not render till full load is performed

User · Answer

Actually  you don t have to use document getElementById  mydiv      You can simply use the id of the div  like   var w   mydiv clientWidth  or var w   mydiv offsetWidth  etc

User · Answer

All Answers are right  but i still want to give some other alternatives that may work   If you are looking for the assigned width  ignoring padding  margin and so on  you could use   getComputedStyle element  width    returns value in px like  727 7px    getComputedStyle allows you to access all styles of that elements  For example  padding  paddingLeft  margin  border-top-left-radius and so on

[javascript] How to find the width of a div using vanilla JavaScript?

Examples related to javascript

Examples related to html