Updated April 12, 2023
Description of jQuery width
The jQuery width() method used to sets or returns the width of the selected jQuery element. This method is a built-in method in jQuery. In our application sometimes we need to set or get the width of the elements for the design purpose, so jQuery provides the width() to perform it. If the width() method is use to get the width of an element, then it return the width of the first matched element. If the width() method is use to set the width of an element, then it sets the width of every matched element. Note that it excludes padding, border, or margin in the width.
Syntax
Syntax to return the width of an element –
$(selector).width();- Return value – The return value of this method is the width of the selected element.
Syntax to set the width of an element –
$(selector).width(value);Parameters:
- value – This is not an optional parameter, that specifies the width that is to be set for the selected element. The width gives in em, px, pt, and all unit, but the default unit is px.
- Return value – The return value of this method is a width of the selected element.
The syntax of the JQuery width() method to set the width of an element by using the function –
$(selector).width(function(index, currentwidth);Parameters:
- function – This is an optional parameter, that specifies the function which return the width of the matched elements.
- index – This parameter specifies the index position of an element in the set of matched elements.
- currentwidth – This parameter specifies the current width of a selected element.
- Return value – The return value of this method is a width of the selected element.
Working of the JQuery width() method
The jQuery width() method uses to set and get the width of an element. So when we call width() method on selector(can be element name, id or class) without any parameter or without passing any value, then it returns the width of that particular element. And if we call width() method on selector with passing some value, then it sets the width of that particular element by that value.
Examples for the jQuery width() Method
Example of jQuery width() method to get the width –
Next, we write the HTML code to understand the jQuery width() method more clearly with the following example, where the width() method is used to get the width of the window, document, and div elements, as below –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery width() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#div {
height : 100px;
width : 200px;
padding : 20px;
margin : 1px;
border : 2px solid red;
background-color : lightyellow;
}
</style>
<script type = "text/javascript">
$(document).ready(function () {
$("#id1").click(function() {
var str = "";
str += "Width of Window is " + $(window).width()+ ".";
$("h2").html(str);
});
$("#id2").click(function() {
var str = "";
str += "Width of document is " + $(document).width()+ ".";
$("h2").html(str);
});
$("#id3").click(function() {
var str = "";
str += "Width of div is " + $("#div").width()+ ".";
$("#div").html(str);
});
});
</script>
</head>
<body>
<h3> Example for the jQuery width() method. </h3>
<button id = "id1" > Click me to get window width </button>
<button id = "id2" > Click me to get document width </button>
<button id = "id3" > Click me to get div width </button>
<h2> </h2>
<div id = "div"> </div>
</body>
</html>Output:
Once we click on the “Click me to get window width” Button, an output is –
once we click on the “Click me to get document width” Button, an output is –
And once we click on the “Click me to get div width” Button, an output is –
As in the above program, the three buttons are created and each button call the specific function and returns the specific element width. So, the first button prints the window width, the second button prints the document width, and the third button prints the div width.
Example of jQuery width() method to set the width –
Next, we write the HTML code to understand the jQuery width() method, where the width() method is used to set the width of the div element by different units, as below –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery width() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#div {
height : 100px;
width : 200px;
padding : 20px;
margin : 1px;
border : 2px solid red;
background-color : lightyellow;
}
</style>
<script type = "text/javascript">
$(document).ready(function () {
$("#px").click(function() {
$("#div").width( "400px" );
});
$("#pt").click(function() {
$("#div").width( "200pt" );
});
$("#em").click(function() {
$("#div").width( "20em" );
});
});
</script>
</head>
<body>
<h3> Example for the jQuery width() method. </h3>
<label><input type="radio" name="gender" id="px"> Click me to set div to 400px</label>
<br>
<label><input type="radio" name="gender" id="pt"> Click me to set div to 200pt</label>
<br>
<label><input type="radio" name="gender" id="em"> Click me to set div to 20em</label>
<br>
<div id = "div"> </div>
</body>
</html>Output:
Once we select the “Click me to set div to 400px” radio button, the output is –
Once we select the “Click me to set div to 200pt” radio button, the output is –
And once we select the “Click me to set div to 20em” radio button, the output is –
As in the above program, the three radio buttons are created and each button call to the specific function and set the different width with a different unit. So, the first radio button set the div width to 400pt, the second radio button set the div width to 200pt and the third first radio button set the div width to 20em.
Conclusion
The jQuery width() method is a built-in method in jQuery, which is used to sets and return the width of an element without including padding, border, or margin.
Recommended Articles
This is a guide to jQuery width. Here we also discuss the description and working of the jQuery width( ) method along with different examples and its code implementation. You may also have a look at the following articles to learn more –
