jQuery Dimensions

Post by **C0D3D** »

jQuery get width and height of an element

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Width and Height of an Element</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").width();
        var divHeight = $("#box").height();
        $("#result").html("Width: " + divWidth + ", " + "Height: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Get Width and Height</button>
    <p id="result"></p>
</body>
</html>

jQuery set width and height of the elements

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set Width and Height of the Elements</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").width(400).height(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Set Width and Height</button>
</body>
</html>

jQuery get inner width and height of an element

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Inner-Width and Inner-Height of an Element</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").innerWidth();
        var divHeight = $("#box").innerHeight();
        $("#result").html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Get innerWidth and innerHeight</button>
    <p id="result"></p>
	<hr>
	<p><strong>Note:</strong> jQuery <b>innerWidth()</b> includes the CSS properties (<b>width</b> + <b>padding-left</b> + <b>padding-right</b>), whereas the <b>innerHeight()</b> includes (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b>).</p>
</body>
</html>

jQuery set inner width and height of the elements

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set Inner-Width and Inner-Height of the Elements</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").innerWidth(400).innerHeight(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Set innerWidth and innerHeight</button>
</body>
</html>

jQuery get outer width and height of an element

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Outer-Width and Outer-Height of an Element</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth();
        var divHeight = $("#box").outerHeight();
        $("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Get outerWidth and outerHeight</button>
    <p id="result"></p>
	<hr>
	<p><strong>Note:</strong> jQuery <b>outerWidth()</b> includes the CSS properties (<b>width</b> + <b>padding-left</b> + <b>padding-right</b> + <b>border-left</b> + <b>border-right</b>), whereas the <b>outerHeight()</b> includes (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b> + <b>border-top</b> + <b>border-bottom</b>).</p>
</body>
</html>

jQuery get outer width and height of an element including margin area

Example 6

Code: Select all

<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<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>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Get outerWidth and outerHeight with margin</button>
    <p id="result"></p>
	<hr>
	<p><strong>Note:</strong> jQuery <b>outerWidth(true)</b> includes the CSS properties (<b>width</b> + <b>padding-left</b> + <b>padding-right</b> + <b>border-left</b> + <b>border-right</b> + <b>margin-left</b> + <b>margin-right</b>), whereas the <b>outerHeight(true)</b> includes (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b> + <b>border-top</b> + <b>border-bottom</b> + <b>margin-top</b> + <b>margin-bottom</b>).</p>
</body>
</html>

jQuery set outer width and height of the elements

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set Outer-Width and Outer-Height of the Elements</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").outerWidth(400).outerHeight(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Set outerWidth and outerHeight</button>
</body>
</html>

jQuery Dimensions

jQuery Dimensions

Who is online