width()

jQuery width() method is used to return or set the width of matched element.

To return width: When this method is used to return the width, it returns the width of first matched element.

To set width:When this method is used to set the width, it sets the width for every matched element.

This method is one of a jQuery dimension.

List of jQuery dimension:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

Syntax:

To return the width:

snippet

$(selector).width()

To set the width:

snippet

$(selector).width(value)

To set the width using a function:

snippet

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

Parameters of jQuery width() method

Parameter	Description
Value	It is a mandatory parameter. It is used for setting width. It specifies the width in px, em, pt etc. The default value of jQuery width() method is px.
Function(index, currentwidth)	It is an optional parameter. It specifies a function that provides the new width of selected element. Index:IIt provides the index position of the element in the set. currentwidth:It provides the current width of the selected element.

Example of jQuery width() method

Let's take an example to demonstrate the effect of jQuery width() method.

To return width:

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Width of div: " + $("div").width());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Execute the jQuery width() method to return width</button>
</body>
</html>

jQuery width() example 2

To set width:

snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    float: left;
    margin: 5px;
    background:orange;
    cursor: pointer;
  }
  .mod {
    background: green;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<script>
var modWidth = 70;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 10;
});
</script>
</body>
</html>