Description:
The jQuery innerWidth () method is used to GET/SET the inner width for the matched element. This will includes left and right padding but not border/margin.
- GET Inner Width: It will return the InnerWidth for the selected/matched element
- SET Inner Width: It will set the InnerWidth for the selected/matched element
Syntax
- $(selector).InnerWidth()
- $(selector).InnerWidth(value)
- $(selector).InnerWidth(value,function(Integer index, Number Width))
| Value | It specify the number of pixels or a number along with an optional unit. |
| function(Integer index,Number height | A function returning the inner height (including padding but not border) to set. The index will return the position of the element for the matched element and the Previous inner Width as arguments. |
When calling .innerWidth(“value”), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
.defaultClass {
border: 5px solid #eed5b7;
padding: 10px;
width: 90px;
height: 50px;
background-color: red;
display: inline-block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.btnClass').click(function () {
$('#divCurrentWidth').text(" Div width (no padding) : " + $('#divbox1').width());
$('#divInnerWidth').text(" Div Inner Width (with top & bottom padding) : " + $('#divbox2').innerWidth());
})
});
</script>
</head>
<body>
<button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br /><br />
<div id="divbox1" class="defaultClass">
</div>
<div id="divbox2" class="defaultClass">
</div>
<br /><br />
<div id="divCurrentWidth"></div>
<div id="divInnerWidth"></div>
</body>
</html>
Output:
Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) & right(10px) padding and return 110 as its innerWidth.
