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:ย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
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 .
Leave A Comment