jQuery - Dimensions
Using jQuery makes it simple to handle the size of elements and the web browser window.
jQuery Dimension Methods
jQuery offers various important functions to handle measurements:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery width() and height() Methods
The width() function does two things: it can either set or tell you the width of an element. This measurement does not include the padding, border, and margin of the element.
The height() function either changes or tells you the size of an element. This size does not include the padding, border, and margin.
This example shows how to find the width and height of a specific <div> element:
jQuery innerWidth() and innerHeight() Methods
The innerWidth() function tells you how wide an element is, including its padding.
The innerHeight() function tells you how tall an element is, and it includes any extra space added by padding.
This example shows how to find the width and height inside a specific <div> element:
jQuery outerWidth() and outerHeight() Methods
The outerWidth() function tells you how wide an element is, including any extra space due to padding and borders.
The outerHeight() function tells you how tall an element is, and it includes both the padding and border in the measurement.
This example shows how to find the width and height of a specific <div> element's outer dimensions:
The outerWidth(true) function tells you how wide an element is, taking into account its padding, border, and margin.
The outerHeight(true) function tells you how tall an element is, taking into account its padding, border, and margin.
jQuery More width() and height()
This example shows how to find the size of both the web page (HTML document) and the visible area in the browser (viewport).
This example adjusts the size of a specific <div> element by setting its width and height.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Width of div: " + $("#div1").width() + " </br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Width of div: " + $("#div1").width() + " </br>";
txt += "Height of div: " + $("#div1").height() + " </br>";
txt += "Inner width of div: " + $("#div1").innerWidth() + " </br>";
txt += "Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>innerWidth() - returns the width of an element (includes padding).</p>
<p>innerHeight() - returns the height of an element (includes padding).</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Width of div: " + $("#div1").width() + " </br>";
txt += "Height of div: " + $("#div1").height() + " </br>";
txt += "Outer width of div: " + $("#div1").outerWidth() + " </br>";
txt += "Outer height of div: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<button>Display dimensions of div</button>
<p>outerWidth() - returns the width of an element (includes padding and border).</p>
<p>outerHeight() - returns the height of an element (includes padding and border).</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Width of div: " + $("#div1").width() + " </br>";
txt += "Height of div: " + $("#div1").height() + " </br>";
txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + " </br>";
txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
undefined
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<button>Display dimensions of div</button>
<p>outerWidth(true) - returns the width of an element (includes padding, border, and margin).</p>
<p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
});
</script>
</head>
<body>
<button>Display dimensions of document and window</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").width(500).height(500);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Resize div</button>
</body>
</html>
HTML
CSS
Javascript
Jquery