jQuery Dimensions

To retrieve and set the CSS dimensions for items, jQuery provides numerous methods such as height(), innerHeight(), outerHeight(), width(), innerWidth(), and outerWidth(). See the figure below to see how various approaches calculate the size of an element's box.

jQuery width() and height() Methods

The jQuery width() and height() functions return or set the element's width and height, respectively. This width and height do not include the element's padding, border, or margin. The width and height of a <div> element are returned in the following example.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Get Width & Height of an Element</h1>
<button class="btnGet">Click me</button>
<div class="box"></div>
<p id="result"></p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            var w = $(".box").width();
            var h = $(".box").height();
            $("#result").html("Width: " + w + ", " + "Height: " + h);
        });
    });
</script>
</body>
</html>

Preview

Similarly, you may set the element's width and height by passing the value as an argument to the width() and height() methods. The value can be a string (number and unit, for example, 100px, 20em, etc.) or a number. The following example will set the width and height of a <div> element to 300 and 300 pixels, respectively.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Set Width & Height of the Elements</h1>
<button class="btnSet">Click me</button>
<div class="box"></div>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $(".box").width(300).height(300);
        });
    });
</script>
</body>
</html>

Preview

jQuery innerWidth() and innerHeight() Methods

The innerWidth() and innerHeight() functions of jQuery fetch or set the element's inner width and inner height. This inner width and height include padding but omit the element's border and margin. On the click of a button, the following example will return the inner width and height of a <div> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Get Inner-Width & Inner-Height of an Element</h1>
<button class="btnGet">Click me</button>
<div class="box"></div>
<p id="result"></p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            var w = $(".box").innerWidth();
            var h = $(".box").innerHeight();
            $("#result").html("Inner Width: " + w + ", " + "Inner Height: " + h);
        });
    });
</script>
</body>
</html>

Preview

Similarly, you may modify the inner width and height of the element by supplying the value as an argument to the innerWidth() and innerHeight() methods. These methods simply change the width or height of the content area of the element to match the supplied value.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Set Inner-Width & Inner-Height of the Elements</h1>
<button class="btnSet">Click me</button>
<div class="box"></div>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $(".box").innerWidth(300).innerHeight(300);
        });
    });
</script>
</body>
</html>

Preview

jQuery outerWidth() and outerHeight() Methods

The jQuery outerWidth() and outerHeight() functions return or set the element's outer width and outer height, respectively. This outer width and height include padding and border but do not include the element's margin. On the press of a button, the following example will return the outside width and height of a <div> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Get Outer-Width & Outer-Height of an Element</h1>
<button class="btnGet">Click me</button>
<div class="box"></div>
<p id="result"></p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            var w = $(".box").outerWidth();
            var h = $(".box").outerHeight();
            $("#result").html("Outer Width: " + w + ", " + "Outer Height: " + h);
        });
    });
</script>
</body>
</html>

Preview

You may also extract the element's outside width and height, including padding and border, as well as the margin. Simply supply the true option for outer width techniques such as outerWidth(true) and outerHeight(true).

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 15px;
            margin: 15px;
            border: 15px solid #0cdb73;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Get Outer-Width & Outer-Height of an Element</h1>
<button class="btnSet">Click me</button>
<div class="box"></div>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $(".box").outerWidth(300).outerHeight(300);
        });
    });
</script>
</body>
</html>

Preview

jQuery Style Properties

jQuery Traversing

jQuery Dimensions

jQuery width() and height() Methods

Example

Example

jQuery innerWidth() and innerHeight() Methods

Example

Example

jQuery outerWidth() and outerHeight() Methods

Example

Example

Links

Tutorials

Connect with us