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

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!

Related Links

jquery selector syntax

jquery for beginners

ajax method in jquery

jquery sibilings example

jquery ajax show loading before success

jquery first of type

jquery dom traversal

set value input jquery

simple jquery form validation example

jquery set css

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.

Related Links

jquery callback example

jquery chaining selector example

remove data jquery

jquery slide up down toggle

jquery text animation examples

jquery append html in div

button click jquery

jquery widget

jquery find ancestor with id

jquery get all descendant

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.