Introduction:

In this article we will learn how to get outer Height of html elements or how to use outerHeight() method in jQuery with example.

Description:

The jQuery outerHeight () funtion is used to return the outer height of first matched html element. This method includes padding and border both.

Example of jQuery outerHeight() method

Let's take an example to demonstrate the effect of jQueryouterHeight() method.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $('p').text("Outer height of div is: " + $("div").outerHeight());
            });
        });
    </script>
 
</head>
<body>    
    <div style="height:100px;width:300px;padding:10px;margin:3px;
     border:1px solid blue;background-color:lightpink;"></div><br>
    <button>Click here to get the outer height of the div</button> <br />
    <p></p>
</body>
</html>

Above code snippet when you click on button than “div” outerHeight show in “p” tag.


 I hope it will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.