jQuery -

Dimensions

jQuery provides a variety of methods to manipulate the dimensions of elements. This tutorial covers different dimension methods with detailed explanations and examples.

1. Getting Width

You can get the width of an element using the .width() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .width() Method - Get Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getWidthButton").click(function(){
                var width = $("div").width();
                alert("Width: " + width);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getWidthButton">Get Width</button>
</body>
</html>

This example shows how to get the width of an element using .width().

2. Setting Width

You can set the width of an element using the .width() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .width() Method - Set Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setWidthButton").click(function(){
                $("div").width(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setWidthButton">Set Width</button>
</body>
</html>

This example demonstrates how to set the width of an element using .width().

3. Getting Height

You can get the height of an element using the .height() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .height() Method - Get Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getHeightButton").click(function(){
                var height = $("div").height();
                alert("Height: " + height);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getHeightButton">Get Height</button>
</body>
</html>

This example shows how to get the height of an element using .height().

4. Setting Height

You can set the height of an element using the .height() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .height() Method - Set Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setHeightButton").click(function(){
                $("div").height(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setHeightButton">Set Height</button>
</body>
</html>

This example demonstrates how to set the height of an element using .height().

5. Getting Inner Width

The .innerWidth() method returns the width of an element, including padding but not the border.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .innerWidth() Method</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getInnerWidthButton").click(function(){
                var innerWidth = $("div").innerWidth();
                alert("Inner Width: " + innerWidth);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            padding: 10px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getInnerWidthButton">Get Inner Width</button>
</body>
</html>

This example shows how to get the inner width of an element using .innerWidth().

6. Getting Inner Height

The .innerHeight() method returns the height of an element, including padding but not the border.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .innerHeight() Method</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getInnerHeightButton").click(function(){
                var innerHeight = $("div").innerHeight();
                alert("Inner Height: " + innerHeight);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            padding: 10px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getInnerHeightButton">Get Inner Height</button>
</body>
</html>

This example demonstrates how to get the inner height of an element using .innerHeight().

7. Getting Outer Width

The .outerWidth() method returns the width of an element, including padding and border.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerWidth() Method</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getOuterWidthButton").click(function(){
                var outerWidth = $("div").outerWidth();
                alert("Outer Width: " + outerWidth);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getOuterWidthButton">Get Outer Width</button>
</body>
</html>

This example shows how to get the outer width of an element using .outerWidth().

8. Getting Outer Height

The .outerHeight() method returns the height of an element, including padding and border.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerHeight() Method</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getOuterHeightButton").click(function(){
                var outerHeight = $("div").outerHeight();
                alert("Outer Height: " + outerHeight);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getOuterHeightButton">Get Outer Height</button>
</body>
</html>

This example demonstrates how to get the outer height of an element using .outerHeight().

9. Getting Outer Width with Margin

The .outerWidth(true) method returns the width of an element, including padding, border, and margin.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerWidth(true) Method - Get Outer Width with Margin</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getOuterWidthMarginButton").click(function(){
                var outerWidthMargin = $("div").outerWidth(true);
                alert("Outer Width with Margin: " + outerWidthMargin);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            margin: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getOuterWidthMarginButton">Get Outer Width with Margin</button>
</body>
</html>

This example shows how to get the outer width of an element including margin using .outerWidth(true).

10. Getting Outer Height with Margin

The .outerHeight(true) method returns the height of an element, including padding, border, and margin.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerHeight(true) Method - Get Outer Height with Margin</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#getOuterHeightMarginButton").click(function(){
                var outerHeightMargin = $("div").outerHeight(true);
                alert("Outer Height with Margin: " + outerHeightMargin);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            margin: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="getOuterHeightMarginButton">Get Outer Height with Margin</button>
</body>
</html>

This example demonstrates how to get the outer height of an element including margin using .outerHeight(true).

11. Setting Inner Width

You can set the inner width of an element using the .innerWidth() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .innerWidth() Method - Set Inner Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setInnerWidthButton").click(function(){
                $("div").innerWidth(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            padding: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setInnerWidthButton">Set Inner Width</button>
</body>
</html>

This example shows how to set the inner width of an element using .innerWidth().

12. Setting Inner Height

You can set the inner height of an element using the .innerHeight() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .innerHeight() Method - Set Inner Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setInnerHeightButton").click(function(){
                $("div").innerHeight(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            padding: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setInnerHeightButton">Set Inner Height</button>
</body>
</html>

This example demonstrates how to set the inner height of an element using .innerHeight().

13. Setting Outer Width

You can set the outer width of an element using the .outerWidth() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerWidth() Method - Set Outer Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setOuterWidthButton").click(function(){
                $("div").outerWidth(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setOuterWidthButton">Set Outer Width</button>
</body>
</html>

This example shows how to set the outer width of an element using .outerWidth().

14. Setting Outer Height

You can set the outer height of an element using the .outerHeight() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerHeight() Method - Set Outer Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#setOuterHeightButton").click(function(){
                $("div").outerHeight(300);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="setOuterHeightButton">Set Outer Height</button>
</body>
</html>

This example demonstrates how to set the outer height of an element using .outerHeight().

15. Checking Width and Height

You can check if an element has a specific width and height using .is() combined with .css().

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .is() and .css() Methods - Check Dimensions</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#checkDimensionsButton").click(function(){
                if ($("div").width() === 200 && $("div").height() === 100) {
                    alert("The dimensions are 200x100.");
                } else {
                    alert("The dimensions are not 200x100.");
                }
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="checkDimensionsButton">Check Dimensions</button>
</body>
</html>

This example shows how to check if an element has a specific width and height.

16. Animating Width

You can animate the width of an element using the .animate() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .animate() Method - Animate Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#animateWidthButton").click(function(){
                $("div").animate({width: "300px"});
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="animateWidthButton">Animate Width</button>
</body>
</html>

This example demonstrates how to animate the width of an element using .animate().

17. Animating Height

You can animate the height of an element using the .animate() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .animate() Method - Animate Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#animateHeightButton").click(function(){
                $("div").animate({height: "300px"});
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="animateHeightButton">Animate Height</button>
</body>
</html>

This example shows how to animate the height of an element using .animate().

18. Calculating Total Width

You can calculate the total width of an element, including padding and border, using .outerWidth().

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerWidth() Method - Calculate Total Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#calculateTotalWidthButton").click(function(){
                var totalWidth = $("div").outerWidth();
                alert("Total Width: " + totalWidth);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            padding: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="calculateTotalWidthButton">Calculate Total Width</button>
</body>
</html>

This example demonstrates how to calculate the total width of an element using .outerWidth().

19. Calculating Total Height

You can calculate the total height of an element, including padding and border, using .outerHeight().

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .outerHeight() Method - Calculate Total Height</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#calculateTotalHeightButton").click(function(){
                var totalHeight = $("div").outerHeight();
                alert("Total Height: " + totalHeight);
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            border: 5px solid black;
            padding: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="calculateTotalHeightButton">Calculate Total Height</button>
</body>
</html>

This example shows how to calculate the total height of an element using .outerHeight().

20. Resizing Elements Dynamically

You can resize elements dynamically based on user input or other events using a combination of dimension methods.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Dynamic Resize</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#resizeButton").click(function(){
                var newWidth = $("#newWidth").val();
                var newHeight = $("#newHeight").val();
                $("div").width(newWidth).height(newHeight);
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; width: 200px; height: 100px;">This is a div.</div>
    <input type="text" id="newWidth" placeholder="New Width">
    <input type="text" id="newHeight" placeholder="New Height">
    <button id="resizeButton">Resize Div</button>
</body>
</html>

This example demonstrates how to resize elements dynamically based on user input.