Total width of element including padding and border in jQuery

Question

As in the subject  how can one get the total width of an element  including its border and padding  using jQuery   I ve got the jQuery dimensions plugin  and running  width   on my 760px-wide  10px padding DIV returns 760   Perhaps I m doing something wrong  but if my element manifests itself as 780 pixels wide and Firebug tells me that there s 10px padding on it  but calling  width   only gives 760  I d be hard pressed to see how   Thanks for any suggestions

User · Answer

Anyone else stumbling upon this answer should note that jQuery now (>=1.3) has outerHeight/outerWidth functions to retrieve the width including padding/borders, e.g.

$(elem).outerWidth(); // Returns the width + padding + borders

To include the margin as well, simply pass true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

User · Answer

Update   The original answer was written prior to jQuery 1 3  and the functions that existed at the time where not adequate by themselves to calculate the whole width   Now  as J-P correctly states  jQuery has the functions outerWidth and outerHeight which include the border and padding by default  and also the margin if the first argument of the function is true      Original answer   The width method no longer requires the dimensions plugin  because it has been added to the jQuery Core  What you need to do is get the padding  margin and border width-values of that particular div and add them to the result of the width method  Something like this   var theDiv       theDiv    var totalWidth   theDiv width    totalWidth    parseInt theDiv css  padding-left    10    parseInt theDiv css  padding-right    10     Total Padding Width totalWidth    parseInt theDiv css  margin-left    10    parseInt theDiv css  margin-right    10     Total Margin Width totalWidth    parseInt theDiv css  borderLeftWidth    10    parseInt theDiv css  borderRightWidth    10     Total Border Width   Split into multiple lines to make it more readable  That way you will always get the correct computed value  even if you change the padding or margin values from the css

User · Answer

document  ready function            div width   append    div width   width     px       div innerWidth   append    div innerWidth   innerWidth     px          div outerWidth   append    div outerWidth   outerWidth     px                    lt div class  width  gt Width of this div container without including padding is   lt  div gt     lt div class  innerWidth  gt width of this div container including padding is   lt  div gt    lt div class  outerWidth  gt width of this div container including padding and margin is       lt  div gt

User · Answer

Just for simplicity I encapsulated Andreas Grech s great answer above in some functions  For those who want a bit of cut-and-paste happiness   function getTotalWidthOfObject object         if object    null    object length    0            return 0             var value         object width        value              parseInt object css  padding-left    10    parseInt object css  padding-right    10     Total Padding Width     value              parseInt object css  margin-left    10    parseInt object css  margin-right    10     Total Margin Width     value              parseInt object css  borderLeftWidth    10    parseInt object css  borderRightWidth    10     Total Border Width     return value     function  getTotalHeightOfObject object         if object    null    object length    0            return 0             var value         object height        value              parseInt object css  padding-top    10    parseInt object css  padding-bottom    10     Total Padding Width     value              parseInt object css  margin-top    10    parseInt object css  margin-bottom    10     Total Margin Width     value              parseInt object css  borderTopWidth    10    parseInt object css  borderBottomWidth    10     Total Border Width     return value

User · Answer

same browsers may return string for border width  in this parseInt will return NaN so make sure you parse value to int properly           var getInt   function  string                if  typeof string     undefined     string                        return 0              var tempInt   parseInt string                if    tempInt  lt   0    tempInt  gt  0                   return 0              return tempInt                     var liWidth     this  width            liWidth    getInt   this  css  padding-left             liWidth    getInt   this  css  padding-right             liWidth    getInt   this  css  border-left-width             liWidth    getInt   this  css  border-right-width

User · Answer

same browsers may return string for border width  in this parseInt will return NaN so make sure you parse value to int properly           var getInt   function  string                if  typeof string     undefined     string                        return 0              var tempInt   parseInt string                if    tempInt  lt   0    tempInt  gt  0                   return 0              return tempInt                     var liWidth     this  width            liWidth    getInt   this  css  padding-left             liWidth    getInt   this  css  padding-right             liWidth    getInt   this  css  border-left-width             liWidth    getInt   this  css  border-right-width

User · Answer

Just for simplicity I encapsulated Andreas Grech s great answer above in some functions  For those who want a bit of cut-and-paste happiness   function getTotalWidthOfObject object         if object    null    object length    0            return 0             var value         object width        value              parseInt object css  padding-left    10    parseInt object css  padding-right    10     Total Padding Width     value              parseInt object css  margin-left    10    parseInt object css  margin-right    10     Total Margin Width     value              parseInt object css  borderLeftWidth    10    parseInt object css  borderRightWidth    10     Total Border Width     return value     function  getTotalHeightOfObject object         if object    null    object length    0            return 0             var value         object height        value              parseInt object css  padding-top    10    parseInt object css  padding-bottom    10     Total Padding Width     value              parseInt object css  margin-top    10    parseInt object css  margin-bottom    10     Total Margin Width     value              parseInt object css  borderTopWidth    10    parseInt object css  borderBottomWidth    10     Total Border Width     return value

User · Answer

looks like outerWidth is broken in the latest version of jquery   The discrepancy happens when  the outer div is floated  the inner div has the width set  smaller than the outer div  the inner div has style  margin auto

User · Answer

Anyone else stumbling upon this answer should note that jQuery now (>=1.3) has outerHeight/outerWidth functions to retrieve the width including padding/borders, e.g.

$(elem).outerWidth(); // Returns the width + padding + borders

To include the margin as well, simply pass true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

User · Answer

Update   The original answer was written prior to jQuery 1 3  and the functions that existed at the time where not adequate by themselves to calculate the whole width   Now  as J-P correctly states  jQuery has the functions outerWidth and outerHeight which include the border and padding by default  and also the margin if the first argument of the function is true      Original answer   The width method no longer requires the dimensions plugin  because it has been added to the jQuery Core  What you need to do is get the padding  margin and border width-values of that particular div and add them to the result of the width method  Something like this   var theDiv       theDiv    var totalWidth   theDiv width    totalWidth    parseInt theDiv css  padding-left    10    parseInt theDiv css  padding-right    10     Total Padding Width totalWidth    parseInt theDiv css  margin-left    10    parseInt theDiv css  margin-right    10     Total Margin Width totalWidth    parseInt theDiv css  borderLeftWidth    10    parseInt theDiv css  borderRightWidth    10     Total Border Width   Split into multiple lines to make it more readable  That way you will always get the correct computed value  even if you change the padding or margin values from the css

User · Answer

looks like outerWidth is broken in the latest version of jquery   The discrepancy happens when  the outer div is floated  the inner div has the width set  smaller than the outer div  the inner div has style  margin auto

User · Answer

Update   The original answer was written prior to jQuery 1 3  and the functions that existed at the time where not adequate by themselves to calculate the whole width   Now  as J-P correctly states  jQuery has the functions outerWidth and outerHeight which include the border and padding by default  and also the margin if the first argument of the function is true      Original answer   The width method no longer requires the dimensions plugin  because it has been added to the jQuery Core  What you need to do is get the padding  margin and border width-values of that particular div and add them to the result of the width method  Something like this   var theDiv       theDiv    var totalWidth   theDiv width    totalWidth    parseInt theDiv css  padding-left    10    parseInt theDiv css  padding-right    10     Total Padding Width totalWidth    parseInt theDiv css  margin-left    10    parseInt theDiv css  margin-right    10     Total Margin Width totalWidth    parseInt theDiv css  borderLeftWidth    10    parseInt theDiv css  borderRightWidth    10     Total Border Width   Split into multiple lines to make it more readable  That way you will always get the correct computed value  even if you change the padding or margin values from the css

User · Answer

Update   The original answer was written prior to jQuery 1 3  and the functions that existed at the time where not adequate by themselves to calculate the whole width   Now  as J-P correctly states  jQuery has the functions outerWidth and outerHeight which include the border and padding by default  and also the margin if the first argument of the function is true      Original answer   The width method no longer requires the dimensions plugin  because it has been added to the jQuery Core  What you need to do is get the padding  margin and border width-values of that particular div and add them to the result of the width method  Something like this   var theDiv       theDiv    var totalWidth   theDiv width    totalWidth    parseInt theDiv css  padding-left    10    parseInt theDiv css  padding-right    10     Total Padding Width totalWidth    parseInt theDiv css  margin-left    10    parseInt theDiv css  margin-right    10     Total Margin Width totalWidth    parseInt theDiv css  borderLeftWidth    10    parseInt theDiv css  borderRightWidth    10     Total Border Width   Split into multiple lines to make it more readable  That way you will always get the correct computed value  even if you change the padding or margin values from the css

User · Answer

document  ready function            div width   append    div width   width     px       div innerWidth   append    div innerWidth   innerWidth     px          div outerWidth   append    div outerWidth   outerWidth     px                    lt div class  width  gt Width of this div container without including padding is   lt  div gt     lt div class  innerWidth  gt width of this div container including padding is   lt  div gt    lt div class  outerWidth  gt width of this div container including padding and margin is       lt  div gt

[jquery] Total width of element (including padding and border) in jQuery

Examples related to jquery

Examples related to dimensions