The jQuery innerWidth() method returns or sets the inner width of the selected element. The value of width includes the padding but not the border and margin property of the element.
If the element already contains some width, the method overwrites the inner width of the specified element. It also includes the padding when it sets the inner width.
Syntax of jQuery innerWidth() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters are given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the selector to select the elements and return or sets the inner width. You can tag name, class name, or id of the elements to select. |
| value | It is the value of inner width to set for the selected element. It can be in px, em, etc. |
jQuery innerWidth() Method Returns the Value of Inner Width
If you want to get the inner width of the selected element, you have to use the method. It returns or get the inner width of the element if present in the selected element. See the example given below contains the button and the div element. The div element contains some width that includes the padding also.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $('.mygetbtn').click(function(){ var mydivht = $(".divht").innerWidth(); alert(mydivht); }); }); </script> <style> .divht{ width:100px; height:100px; border:1px solid #ccc; padding:20px; } </style> <button type="button" class="mygetbtn">Click to Return Inner Width</button><br><br> <div class="divht"></div> |
Output
When you click the button given above, it returns the inner width of the element including the padding. You will get the inner width in the alert box.
How to Set Inner Width Value
You can also set the inner width of the element. The inner width is the width including the padding of the element. It sets the inner width in the size format px, em, etc. If the selected element already contains some width, it overwrites the width with the specified one.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $('.mysetbtn').click(function(){ $(".divsetht").innerWidth("200"); }); }); </script> <style> .divsetht{ width:100px; height:100px; border:1px solid #ccc; padding:20px; } </style> <button type="button" class="mysetbtn">Click to Set Inner Width</button><br><br> <div class="divsetht"></div> |
Output
You have to click the button given above to see the width changes with the specified width. The above output showing the difference after you click on the button element.
You may also like to read
I hope you like this tutorial on jQuery innerWidth() method. If you have any queries regarding the tutorial, please comment below.
References