jQuery innerWidth() and innerHeight() Methods in Tamil

The innerWidth() and innerHeight() methods in jQuery are used to get the computed inner width and inner height of the first matched element in a set. These methods include the content width and height along with padding but exclude borders and margins.

innerWidth() Method

The innerWidth() method gets the computed inner width of the first matched element, including padding but excluding borders and margins.

innerHeight() Method

The innerHeight() method gets the computed inner height of the first matched element, including padding but excluding borders and margins.

Source Code

$('div').innerHeight(): Retrieves the inner height of the <div>, which includes the height of the element plus its padding (150px + 10px).
$('div').innerWidth(): Retrieves the inner width of the <div>, which includes the width of the element plus its padding (200px + 10px).
$('div').outerHeight(): Retrieves the outer height of the <div>, which includes the height, padding, and border (150px + 10px + 5px).
$('div').outerWidth(): Retrieves the outer width of the <div>, which includes the width, padding, and border (200px + 10px + 5px).

The results are then logged to the console using console.log(). Depending on the specific dimensions and styling of your <div>, you will see these values in the console when you inspect the page.

<html>
	<head>
        <title>inner Outer / Height Width</title>
        <style>
            div{
                height: 150px;
                width: 200px;
                background:orange;
                padding: 10px;
                border: 5px solid red;
                margin: 10px;
            }
        </style>
	</head>
	<body>
        <div>Tutor Joes</div>
	<script src="js/jquery.js"></script>
	<script>
	$("document").ready(function(){
		//Inner Height = element+padding
		console.log('InnerHeight : '+$('div').innerHeight());
		console.log('InnerWidth : '+$('div').innerWidth());
		//Outer Height = element+padding+border
		console.log('outerHeight : '+$('div').outerHeight());
		console.log('outerWidth : '+$('div').outerWidth());
	});
	</script>	
	</body>
</html>