jQurery width() method use to get and set the width of selected element.
Syntax:$(selector).width()
return the current width of selected element$(selector).width(current width);
set the current width on selected element$(selector).width(function(index, current width))
and also this signature used to set the current width on selected elements
Example:
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
$('#get').click(function () {
alert('Witdh : ' + $('div').width()+' px');
});
$('#set').click(function () {
$('div').width('100%');
$('div').text(' div width is 100% of any size ');
});
});
</script>
<style>
body {
margin:10px;
padding:10px;
}
div {
background-color:cyan;
height:120px;
width:50%;
color:white;
text-align:center;
font-size:40px;
}
</style>
</head>
<body>
<button id='get'>Click Me</button> <button id='set'>Set width 100%</button> <br /><br />
<div>
this is div and div width is 50% of any size
</div>
</body>
</html>
Output:
