jQuery - Dimensions

It's simple to manipulate element and browser window size with jQuery.

You can also search for these topics, jquery dimensions plugin and element, define the jquery get dimensions of image and set the image, how to get dimensions of browser window using jquery, jquery dialog and viewport dimensions, how to set image width and height dynamically in jquery, change div dimensions.

jQuery Dimension Methods

jQuery has many useful techniques for working with dimensions :

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
  • outerWidth(true)
  • outerHeight(true)

The width() and height() methods either sets or returns the width and height of an element (excludes padding, border and margin).

The innerWidth() and innerHeight() methods either sets or returns the width and height of an element (includes padding).

The outerWidth() and outerHeight() methods either sets or returns the width and height of an element (includes padding and border).

The outerWidth(true) and outerHeight(true) methods either sets or returns the width and height of an element (includes padding, border and margin).


jquery html element dimension
You can also search for these topics, how to stop animation in jquery dimension, set properties, jquery dimension method get siblings and parent, how to handling and manipulate the jquery dimension methods, multiple dimension.

jQuery width() and height() Methods

In this section, We will see about different types of width and height methods of a given div element.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            var txt = "";
            txt += "<b>Width of div: " + $("#div1").width() + "<br />";
            txt += "Height of div: " + $("#div1").height() + "<br /><br />";
            txt += "Inner Width of div: " + $("#div1").innerWidth() + "<br />";
            txt += "inner Height of div: " + $("#div1").innerHeight() + "<br /><br />";
            txt += "Outer Width of div: " + $("#div1").outerWidth() + "<br />";
            txt += "Outer Height of div: " + $("#div1").outerHeight() + "<br /><br />";
            txt += "Outer Width (true) of div: " + $("#div1").outerWidth(true) + "<br />";
            txt += "Outer Height (true) of div: " + $("#div1").outerHeight(true) + "</b>";
            $("#result1").html(txt);
        });
    });
</script>

</head>
<body>

<div id="div1" style="text-align:center; border:2px solid blue; padding:5px; margin:5px; height:40px; width:220px;">
Hello World!
</div><br />

<button id="b1">Get Width and Height</button><br /><br />
<div id="result1"></div><br />

</body>
</html>

Output :-

Hello World!





You can also search for these topics, set and get width and height method in jquery, set and get image using jquery width and height method, before load, how to resize div, example for jQuery width() and height() methods.
You can also search for these topics, jquery innerwidth() and innerheight() methods example, how to set image width and height methods, div element to fix, dynamic and viewport, add html and css elements, ways to load jquery width and height methods, example for jQuery innerWidth() and innerHeight() methods.
You can also search for these topics, difference between jquery outerwidth() and outerheight() methods example, difference between outerwidth() and outerwidth(true), width vs innerwidth vs outerwidth.

jQuery More width() and height()

You can also get the width and height of an html page document and browser window (browser viewport).

Example:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b3").click(function () {
            var txt = "";
            txt += "Document width/height: " + $(document).width();
            txt += "x" + $(document).height() + "\n\n";
            txt += "Window width/height: " + $(window).width();
            txt += "x" + $(window).height();
            alert(txt);
        });
    });
</script>
</head>
<body>

<button id="b3">Display dimensions of document and window</button>

</body>
</html>

Output :-


Tips:- Resize the browser window and then click the button.

You can also search for these topics, jquery more width and height attribute example, jquery more width and height from img, get viewport, resize browser window, get document and browser width and height.