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:ย 

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 .

dotnet-helpers-com-jquery-width-method-thiyagu-jquery-helpers