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).
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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