This post was most recently updated on October 10th, 2017
Definition:
width(): This method gives width of the selected element (excluding padding, border and margin).
innerWidth(): This method gives width of the selected element (including padding, excluding border and margin).
outerWidth(): This method gives width of the selected element (including padding and border, excluding margin).
outerWidth(true): This method gives width of the selected element (including padding, border and margin).
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div id="divElement" style="padding:30px; background-color:yellow; border:5px solid #000000; width:300px; height:130px; margin:20px;"> <strong>Div Dimensions:</strong></br> width = 300px<br/> padding = 30px all sides<br/> border = 5px all sides<br/> margin = 20px all sides </div> <h3>Ouput</h3> <div style="padding:30px; background-color:yellow; border:1px solid #000000; width:300px; margin:20px;"> <p class="width">width() =</p> <p class="innerWidth">innerWidth() =</p> <p class="outerWidth">outerWidth() =</p> <p class="outerWidthTrue">outerWidth(true) =</p> </div> <button class="btn-width">width()</button> <button class="btn-innerWidth">innerWidth()</button> <button class="btn-outerWidth">outerWidth()</button> <button class="btn-outerWidthTrue">outerWidth(true)</button> |
Explanation: The yellow box shown below with dimensions and the output when you click on click on respective buttons given below.
To see more details click here for DEMO page.
