How to use height(value) Method and height() using function method in JQuery
In this article, I will explain use of height(value) Method and how to use height() method using function in JQuery.
Introduction
height() method set set and return the height of selected elements.
JQuery CSS height(val) method
height(val) method sets the CSS height of element.
- value set the height in px, em, %, etc. Default unit is px
Syntax
|
$(selector).height(value)
|
Example
The following example shows how to height(val) method in jquery.
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").height(80);
});
});
</script>
</head>
<body>
<h1>Height(val) funaction example</h1>
<p style="background-color:green">First paragraph.</p>
<p style="background-color:blue">Second paragraph.</p>
<button>Click for set the height of all p elements</button>
</body>
</html>
|
Output
JQuery CSS height() using function method
height(fun) use a function to set the height of elements.
Syntax
|
$(selector).height(function(index,oldheight))
|
Example
The following example shows how to height() using function method in jquery.
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").height(function (n, c) {
return c + 10;
});
});
});
</script>
</head>
<body>
<h2>Height() method with funation example</h2>
<p style="background-color:Silver">First paragraph.</p>
<button>Click for Increase the height of the p element with 15 px.</button>
</body>
</html>
|
Output
Further Readings
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here