A short element dimensions tutorial in jQuery, CSS and jQuery, with source code examples of how to manipulate the dimensions of html elements on a webpage using:

  • width(): method sets or returns the width of an element (excludes padding, border and margin).
  • height(): method sets or returns the height of an element (excludes padding, border and margin).
  • innerWidth(): method returns the width of an element (includes padding).
  • innerHeight(): method returns the height of an element (includes padding).
  • outerWidth(): method returns the width of an element (includes padding and border).
  • outerHeight(): method returns the height of an element (includes padding and border).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Examples</title>
</head>
<body>
    <div class="box" style="width: 300px;height: 400px;border: 1px solid black;padding:30px;"></div>
    <br>
    <br>
    <button class="btn1">width()</button>
    <button class="btn2">height()</button>
    <button class="btn3">innerwidth()</button>
    <button class="btn4">innerheight()</button>
    <button class="btn5">outerwidth()</button>
    <button class="btn6">outerheight()</button>
    <script src="jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            // width()
            $(".btn1").click(function() {
                alert("width : " + $(".box").width())
            })

            // height()
            $(".btn2").click(function() {
                alert("height : " + $(".box").height())
            })

            // innerwidth()
            $(".btn3").click(function() {
                alert("innerwidth : " + $(".box").innerWidth())
            })

            // innerheight()
            $(".btn4").click(function() {
                alert("innerheight : " + $(".box").innerHeight())
            })

            // outerwidth()
            $(".btn5").click(function() {
                alert("outerwidth : " + $(".box").outerWidth())
            })

            // outerheight()
            $(".btn6").click(function() {
                alert("outerheight : " + $(".box").outerHeight())
            })
        })
    </script>
</body>
</html>

 

Tags: Get, Set, width(), height(), innerheight(), innerWidth, outerWidth(), OuterHeight(), jQuery

Licence: MIT license