.width() method in Jquery

Thiyagu

8 years ago

Description:

The jQuery width() method is used to GET/SET the width for the selected element. In simple, width () method can be split in to two purposes

GET width : It will return the width for the selected/matched element
SET width : It will set the width for the selected/matched element

Syntax

$(selector).width ()
$(selector).width (value)
$(selector).width (function(index,currentwidth ))

Value	It specifies the width in px, pt, em, etc. In default it treat as px.
function(index,currentclass)	A function that returns one or more class names to remove index : Returns the index position of the matched element currentclass : Returns the current class name of the matched element

Difference between .css(“width”) & .width():

.css( “width” ) : It will returns with unit value (for example, 200px)
.width() : It return with units less (for example, 200).

When to use?

If we need to perform some mathematical calculation based on the element’s width then we can use .width() method.

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: 50px;
 height: 50px;
 background-color: red;
 display:inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('.defaultClass').width(80).css({ backgroundColor: '#4cff00' })
 $('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').width());
 })
 });
 </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="divCurrentHeight"></div>
</body>
</html>

<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 50px;

height: 50px;

background-color: red;

display:inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('.defaultClass').width(80).css({ backgroundColor: '#4cff00' })

$('#divCurrentHeight').text(" Current Div height is: "+ $('.defaultClass').width());

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">SET/GET width() CSS property</button><br/><br />

</div>

</div>

</body>

</html>

Output:

Clicking on button, the .width (80) method will execute and set 80 for the selected element and .width () method will GET the width of the selected div as shown below .