Related Articles

Related Articles

jQuery | Dimensions
  • Last Updated : 09 Jul, 2019

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
Recommended Articles
Page :