jQuery | Dimensions

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 elemnet.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery Dimensions
    </title>
  
    <script src=
    </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>

chevron_right


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 elemnet.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery Dimensions
    </title>
  
    <script src=
    </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>

chevron_right


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 elemnet.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery Dimensions
    </title>
  
    <script src=
    </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>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.