jQuery | Dimensions

Last Updated : 29 Apr, 2021

The JQuery Dimensions is an inbuilt method in jQuery which is used to work with the dimensions of various elements and browser window. There are several dimension methods in JQuery Dimension.
jQuery Dimension Methods:

width(): This method sets or returns the width of the element excluded padding, border with the margin.
height(): This method sets or returns the height of the element excluded padding, border with the margin.
innerWidth(): This method sets or returns the inner width of the element include padding.
innerHeight(): This method sets or returns the inner height of the element include padding.
outerWidth(): This method sets or returns the outer width of the element include padding and border.
outerHeight(): This method sets or returns the outer height of the element include padding and border.

Note: All the methods sets or returns the specified <div> element.
JQuery width() and height() methods: In this example you will see in a specified <div> element the method will return the width and height of the element.
Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery Dimensions
    </title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var txt = "";
                txt += "Width of div: " + $(".geeks").width() + "</br>";
                txt += "Height of div: " + $(".geeks").height();
                $(".geeks").html(txt);
            });
        });
    </script>
 
    <style>
        .geeks {
            height: 100px;
            width: 350px;
            padding: 5px;
            margin: 3px;
            border: 2px solid black;
            background-color: #F0F3F4;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="geeks">
            <h1>GeeksforGeeks</h1></div>
        <br>
        <button>Display width and height </button>
    </center>
</body>
 
</html>

Output:

Before clicking the button:

After clicking the button:

JQuery innerWidth() and innerHeight() methods: In this example you will see in a specified <div> element the method will return the inner width and inner height of the element.
Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery Dimensions
    </title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var txt = "";
                txt += "Inner width of div: " + $(".geeks").innerWidth() + "</br>";
                txt += "Inner height of div: " + $(".geeks").innerHeight();
                $(".geeks").html(txt);
            });
        });
    </script>
 
    <style>
        .geeks {
            height: 100px;
            width: 350px;
            padding: 5px;
            margin: 3px;
            border: 2px solid black;
            background-color: #F0F3F4;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="geeks">
            <h1>GeeksforGeeks</h1></div>
        <br>
        <button>Display Inner width and Inner height </button>
    </center>
</body>
 
</html>

Output:

Before clicking the button:

After clicking the button:

JQuery outerWidth() and outerHeight() methods: In this example you will see in a specified <div> element the method will return the outer width and outer height of the element.
Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery Dimensions
    </title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var txt = "";
                txt += "Outer width of div: " + $(".geeks").outerWidth() + "</br>";
                txt += "Outer height of div: " + $(".geeks").outerHeight();
                $(".geeks").html(txt);
            });
        });
    </script>
 
    <style>
        .geeks {
            height: 100px;
            width: 350px;
            padding: 5px;
            margin: 3px;
            border: 2px solid black;
            background-color: #F0F3F4;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <div class="geeks">
            <h1>GeeksforGeeks</h1></div>
        <br>
        <button>Display Outer width and Outer height </button>
    </center>
</body>
 
</html>