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