jQuery innerWidth() is used to get the exact width of the selected elements. The inner width is the combination of the element's width and padding. Margins and limits are not included. And the same goes for innerHeight() . This is also counted except margin and border.
Syntax:
$(selector).innerWidth()
return the width + left padding + right padding$(selector).innerHeight()
return height +top padding + bottom padding
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 () {
$('div').click(function () {
$(this).text('inner Width : ' + $(this).innerWidth() + 'px inner heigth : ' + $(this).innerHeight()+' px');
});
});
</script>
<style>
body {
margin: 10px;
padding: 10px;
}
div {
background-color: cyan;
color: white;
text-align: center;
font-size:20px;
}
#div1 {
margin:10px;
padding:10px;
width:100px;
height:120px;
background-color: blue;
}
#div2 {
margin:10px;
padding:15px;
background-color: black;
width:150px;
height:150px;
}
#div3 {
margin:10px;
padding:30px;
background-color: red;
width:250px;
height:200px;
}
</style>
</head>
<body>
<button id='get'>Click on boxes then get inner width and height </button>
<button id='set'>Set width 100%</button>
<br />
<br />
<div id='div1'>width : 100 and Heigth : 120</div>
<div id='div2'>width : 150 and Heigth : 150</div>
<div id='div3'>width : 250 and Heigth : 200</div>
</body>
</html>
Output:
