jQuery Dimensions
The jQuery library includes various methods to manipulate DOM element's dimensions like height, width etc. When writing reusable plugins , you often want to set or animate an element's width and height that include its padding, border, or margin. This is especially important in plugins that allow custom styling.
jQuery provides six functions that we can use to get the height and width of an element.
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() and height() Methods
The jQuery width() and height() methods get or set the width and the height of the element respectively. This width and height doesn't include padding, border and margin on the element.
#boxDiv {
height: 100px;
width: 200px;
border: 1px solid red;
}
var boxWidth = $("#boxDiv").width();
var boxHeight = $("#boxDiv").height();
The above code will return the width and height of the boxDiv element.
innerWidth() and innerHeight() Methods
The jQuery innerWidth() and innerHeight() methods returns the inner width and the inner height of the element, includes padding, respectively.
#boxDiv {
height: 100px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
var boxWidth = $("#boxDiv").innerWidth();
var boxHeight = $("#boxDiv").innerHeight();
The above code will return the Inner width and Inner height of the boxDiv element.
- InnerHeight = height + padding on both side = 100 + 20 + 20 = 140
- InnerWidth = width + padding on both side = 200 + 20 + 20 = 240
outerWidth() and outerHeight() Methods
The jQuery outerWidth() and outerHeight() methods returns the outer width and the outer height of the element respectively. This outer width and height includes padding and border but excludes the margin on the element.
#boxDiv {
height: 100px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
var boxWidth = $("#boxDiv").outerWidth();
var boxHeight = $("#boxDiv").outerHeight();
The above code will return the Outer width and Outer height of the boxDiv element.
- OuterHeight = height + padding + border = 100 + 20 + 20 + 2 + 2= 144
- InnerWidth = width + padding + border = 200 + 20 + 20 +2 +2 = 244
outerWidth(true) and outerHeight(true)
The jQuery outerWidth(true) and outerHeight(true) methods returns the outer width and the outer height of the element respectively includes padding, border, and margin.
#boxDiv {
height: 100px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
var boxWidth = $("#boxDiv").outerWidth(true);
var boxHeight = $("#boxDiv").outerHeight(true);
- OuterHeight(true) = height + padding + border + margin = 100 + 20 + 20 + 2 + 2 + 5 + 5= 154
- InnerWidth(true) = width + padding + border + margin = 200 + 20 + 20 +2 +2 +5 +5 = 254
Browser View
boxDiv {
height: 200px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
Width:
Inner Height:
Outer Width:
Outer Width(true)
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var boxWidth = $("#boxDiv").width();
var boxHeight = $("#boxDiv").height();
$("#width").html("Width: " + boxWidth + ", " + "Height: " + boxHeight);
boxWidth = $("#boxDiv").innerWidth();
boxHeight = $("#boxDiv").innerHeight();
$("#innerwidth").html("Inner Width: " + boxWidth + ", " + "Inner Height: " + boxHeight);
boxWidth = $("#boxDiv").outerWidth();
boxHeight = $("#boxDiv").outerHeight();
$("#outerwidth").html("Outer Width: " + boxWidth + ", " + "Outer Height: " + boxHeight);
boxWidth = $("#boxDiv").outerWidth(true);
boxHeight = $("#boxDiv").outerHeight(true);
$("#outerwidthtrue").html("Outer Width(true): " + boxWidth + ", " + "Outer Height(true): " + boxHeight);
});
});
</script>
<style>
#boxDiv {
height: 100px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<div id="boxDiv">
#boxDiv {
height: 100px;
width: 200px;
padding: 20px;
margin: 5px;
border: 2px solid black;
background-color: yellow;
}
</div>
<br>
<button>Click me</button>
<p id="width"></p>
<p id="innerwidth"></p>
<p id="outerwidth"></p>
<p id="outerwidthtrue"></p>
</body>
</html>
Related Topics