Updated March 24, 2023
Introduction to jQuery innerWidth()
jQuery innerWidth() is an inbuilt jQuery method. It gives the current computed inner width for the first matched element and sets the width for each matched element. This method is supported by browsers- Google Chrome, Internet Explorer, Firefox, Opera, Safari.
The method innerWidth() method includes the padding value but excludes the margin and border value as represented in the below diagram.
Syntax of jQuery innerWidth()
| Syntax | Parameter Description | Value Type | Version |
| $(selector).innerWidth() | NA | NA | 1.0 |
| $(selector). innerWidth (Value) | 1. Value: A numerical value as the measurement value. | 1. Handler: String/Number | 1.8.0 |
| $(selector). innerWidth (Function) | 1. Function: To set the width of the matched element whose index is given as an input argument. | 1. Function: Function | 1.8.0 |
Examples of jQuery innerWidth()
Given below are the examples of jQuery innerWidth():
Example #1: Without using any parameter
innerWidth() method can be used without providing any input argument. It is used to get the width measurement for the first matched element including the padding value. This method without input argument becomes a read-only property of the window.
The below example demonstrates the application of the innerWidth method to get the width for a div element. Four div elements are defined with different colors, padding values, border thickness, and margin value. A script function is written to show the output from innerWidth() for a div session on click.
Code:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
//Displaying the inner width result for respective div sessions
$("div").click(function () {
var color = $(this).css("background-color");
var width = $(this).innerWidth();
$("#result").html("Inner Width is <span>" + width + "</span>.");
$("#result").css({'color': color, 'background-color':'white'});
});
});
</script>
//Design different div session with different margin, padding and border values
<style>
#div1 { margin:10px;padding:12px; border:3px solid #666; width:60px;}
#div2 { margin:15px;padding:6px; border:5px solid #666; width:60px;}
#div3 { margin:20px;padding:12px; border:3px solid #666; width:60px;}
#div4 { margin:15px;padding:6px; border:5px solid #666; width:60px;}
</style>
</head>
<body style="background-color: beige;">
<p style="font-family: Arial, Helvetica, sans-serif;">Click on any square:</p>
<span id = "result"> </span>
<div id = "div1" style = "background-color:blue;"></div>
<div id = "div2" style = "background-color:#8E44AD ;"></div>
<div id = "div3" style = "background-color:#BA4A00 ;"></div>
<div id = "div4" style = "background-color:#186A3B ;"></div>
</body>
</html>Output:
Before innerWidth() method is called:
After innerWidth() method is called:
Screen1: When Blue box is clicked:
Screen2: When the violet box is clicked:
Screen3: When Brown box is clicked:
Screen4: When Green box is clicked:
Example #2: With the ‘value’ parameter
For jQuery innerWidth(), a value of type string or number can be given as input argument value. This syntax can be used to modify the width of the selected element to the value that is passed to the method as input argument value.
In the below code snippet, innerWidth() event is applied on the <div> session. The initial width of the div session is set to 300px. The width of the div element changes to 500px once the button element is clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
//Innerwidth() is used to set the width to 500px
$("div").innerWidth(500)
$( "p" ).text( "InnerWidth for div session:" + $( "div" ).innerWidth() );
});
});
</script>
</head>
<body style="background-color: beige;">
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
<p></p>
<button>Click here to update the inner width of div</button>
</body>
</html>/code<>Output:
Before innerWidth() method is called:
After innerWidth() method is called:
Example #3: innerWidth() With ‘function’ parameter
In this syntax, the method innerWidth() accepts function as input argument. This syntax of innerWidth() method accepts any function that is with or without input arguments.
In the below code snippet, the function myfunc() add 100px to the current width of the div session and return the resultant value to innerWidth() method. The resultant value from myfunc() method works as value input to innerWidth() method. On the button click the width of the div session changes to the value obtained from myfunc() function.
Code:
<!DOCTYPE html>
<html>
<body>
<div id="idDiv" style="height:50px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">This is the div session</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//The width of the div element is decided by the function output of myfunc() and //given as input argument to innerWidth()
$(document).ready(function(){
$("button").click(function(){
$("div").innerWidth(myfunc());
$( "p" ).text( "InnerWidth for div session:" + $( "div" ).innerWidth());
});
});
function myfunc()
{
return 100+$( "div" ).innerWidth()
}
</script>
<body style="background-color: beige;">
<button>Click here to update the inner width of div</button>
<p></p>
</html>Output:
Before innerWidth() method is called:
After innerWidth() method is called:
Screen 1: myfunc method is called once.
Screen 2: myfunc method is called twice.
Additional Note
- This method returns the value of the inner width in terms of pixels.
- In the case of an empty set of elements, the method gives the result as ‘undefined’.
- This method does not support .doc or window object. For such an object. width() method is used.
- The resultant value can be fractional as well. If the code takes the round value for the result, it may give incorrect dimensions for the site in the zoomed condition as the browser may not include any API to detect such condition.
- If the matched element or its parent element is in hidden state, innerWidth() may not give an accurate result. In order to avoid such erroneous result, it is required to ensure the visibility state of the element to be true then revert back to the hidden state after the method execution is completed. Though it works for accuracy, still reliability of this approach is under question mark.
- InnerWidth(), OuterWidth() and Width() are similar to each other. They are different from each other in terms of inclusion or padding, margin and border values. InnerWidth() includes padding value only where as OuterWidth() includes both padding and border value. Width() does not consider only element width.
Recommended Articles
This is a guide to jQuery innerWidth(). Here we discuss the introduction, syntax, and examples of jQuery innerWidth(). You may also have a look at the following articles to learn more –
