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

by

[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

More Related Contents:

  1. jQuery find events handlers registered with an object
  2. Best way to remove an event handler in jQuery?
  3. jQuery Event : Detect changes to the html/text of a div
  4. How to force a html5 form validation without submitting it via jQuery
  5. Jquery bind double click and single click separately
  6. jQuery and MooTools Conflict
  7. jQuery UI Autocomplete use startsWith
  8. jquery IE Fadein and Fadeout Opacity
  9. How can I check if a key is pressed during the click event with jQuery?
  10. Get element type with jQuery
  11. xmlHttp.getResponseHeader + Not working for CORS
  12. jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
  13. How can I use jQuery validation with the “chosen” plugin?
  14. Load website into DIV
  15. Removing file from multiple files uploader on button click when using HTML5 file input
  16. jquery callback after all images in dom are loaded?
  17. jQuery syntax – when to use $ (dollar) vs jQuery [duplicate]
  18. How to trigger $().ready() in jQuery?
  19. Jquery condition check is(‘:hover’) not working
  20. jQuery $.animate() multiple elements but only fire callback once
  21. iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
  22. Selecting text on focus using jQuery not working in Safari and Chrome
  23. Check if textbox has empty value
  24. Apply CSS to jQuery Dialog Buttons
  25. Fire event on enter key press for a textbox
  26. JQuery UI Datepicker, reverse the order of the year in the dropdowns
  27. Invoke ColdFusion function using AJAX
  28. JQuery Ajax is sending GET instead of POST
  29. jQuery 1.4.2 VSDoc
  30. How does jQuery .live() work?

Leave a Comment