jqueryexample.com jQuery examples - get/set height() - jqueryexample.com

jQuery examples – get/set height() by jqueryexample

jQuery makes easy to work with the dimensions of elements and even the browser window. You can use height() methods for measurement the dimensions or set the height of selected element.In this tutorial i will show you how to get height of an element.
Syntax:
1. $(selector).height(); //It will return the height of first element.

$(document).height();
$(window).height();
$(‘p’).height();
$(‘#myid’).height();
$(‘.myClass’).height();

Set Height:
Example:
$(document).height(600);
$(window).height(800);
$(‘p’).height(50);

Example1:
Put jQuery on your server and use the following code to reference the script.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#getp").click(function () {
alert("height of paragraph: " + $("p").height());
});
$("#getd").click(function () {
alert("height of document: " + $(document).height());
});
$("#getw").click(function () {
alert("height of window: " + $(window).height());
});
});
</script>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div> </div>
<p> Sample paragraph to test height
</body>
</html>

Note: The width() and height() is simply the computed size of the element. If you use innerWidth() and innerHeight(), padding is included in the returned values. If you use the outerWidth() and outerHeight() methods, both padding and border is included in the returned values.

Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment