The jQuery innerWidth() and innerHeight() methods get or set the inner width and the inner height of the element respectively. This inner width and height includes the padding but excludes border and margin on the element. The following example will return the inner width and height of a <div> element on the click of a button.

Example

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

Similarly, you can set the element’s inner width and height by passing the value as a parameter to the innerWidth() and innerHeight() method. These methods only alter the width or height of the element’s content area to match the specified value.

For example, if the current width of the element is 300 pixels and the sum of the left and right padding is equal to 50 pixels than the new width of the element after setting the inner width to 400 pixels is 350 pixels i.e. New Width = Inner Width - Horizontal Padding. Similarly, you can estimate the change in height while setting the inner height.

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").innerWidth(400).innerHeight(300);
    });
});
</script>

jQuery outerWidth() and outerHeight() Methods

The jQuery outerWidth() and outerHeight() methods get or set the outer width and the outer height of the element respectively. This outer width and height includes padding and border but excludes the margin on the element. The following example will return the outer width and height of a <div> element on the click of a button.

Example

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

You can also get the outer width and height that includes padding and border as well as the margin of the element. For that just specify the true parameter for the outer width methods, like outerWidth(true) and outerHeight(true).

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth(true);
        var divHeight = $("#box").outerHeight(true);
        $("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
    });
});
</script>

Similarly, you can set the element’s outer width and height by passing the value as a parameter to the outerWidth() and outerHeight() methods. These methods only alter the width or height of the element’s content area to match the specified value, like the innerWidth() and innerHeight() methods.

For example, if the current width of the element is 300 pixels, and the sum of the left and right padding is equal to 50 pixels, and the sum of the width of the left and right border is 20 pixels than the new width of the element after setting the outer width to 400 pixels is 330 pixels i.e. New Width = Outer Width - (Horizontal Padding + Horizontal Border). Similarly, you can estimate the change in height while setting the outer height.

Example

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").outerWidth(400).outerHeight(300);
    });
});
</script>