LearnFast.Ninja

jQuery get div height

Build div with id and some text. build function that get the div height and show it on the screen. add button to set on click event for function call. The main idea is to write less and simple, just write your id dot height function. In the code example we click the button then we get the height of the div that we send as parameter and print it to result div.

Step 1: Build div with id and some text 

<div id="My_Div">

    Hello World,

    <br />

    jquery get div height!

</div>

 

Step 2: build function that get the div height and show it on the screen 

function Disable_Button(Elm_Id) {

    var My_Height = $("#" + Elm_Id).height();

    $("#My_Result").html(My_Height);

}

 
Step 3: add button to set on click event for function call 
<input type="button" value="get div height" onclick="Get_Height('My_Div');" />
 
The main idea is: 

$("#My_Div").height(); 
 
Complete code: 

<html>

<head>

    <title>jquery get div height</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript">

        function Get_Height(Elm_Id) {

            var My_Height = $("#" + Elm_Id).height();

            $("#My_Result").html(My_Height);

        }

    </script>

</head>

<body>

    <div id="My_Div">

        Hello World,

 <br />

        jquery get div height !

    </div>

    <input type="button" value="get div height" onclick="Get_Height('My_Div');" />

    <div id="My_Result"></div>

</body>

</html>


Tags

jquery

height