We can easily get height of div using jquery. You have to use height() method of jquery to get height of any html element. In Below example there are three div respectively Header, Container and Footer. If you click the button "Get Height" then it display height of div.
$('.Container').height();
CODE
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnGetHeight').click(function () {
var header = $('.Header').height();
var container = $('.Container').height();
var footer = $('.Footer').height();
alert('Header : ' + header + ' Container : ' + container + ' Footer : ' + footer);
});
});
</script>
</head>
<body>
<div class="Header" style="background:Green; height:100px; font:normal 30px/34px Arial; text-align: center;">Header</div>
<div class="Container" style="padding:20px">
This is the best exaplete to get the height of div.<br />
Please click below button to get the height of Header, Footer and Container.<br />
<button type="button" class="btnGetHeight">Get Height</button><br />
</div>
<div class="Footer" style="background:Red; height:50px; font:normal 30px/34px Arial; text-align: center;">Footer</div>
</body>
</html>
DISPLAY
Header
This is the best exaplete to get the height of div.
Please click below button to get the height of Header, Footer and Container.
Please click below button to get the height of Header, Footer and Container.
No comments :
Please Give Your Feedback