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.
  • 1176

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

 

height value.jpg

 

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

 

 height function.jpg

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

© 2013 dotNetheaven. All rights reserved.