JavaScript DHTML/jQuery/outerWidth
Get outer width and outer height
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
alert(
"outerWidth: " + $("div").outerWidth() + "\n" +
"outerHeight: " + $("div").outerHeight()
);
}
);
</script>
<style type="text/css">
div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid rgb(200, 200, 200);
background: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Outer width and height with margin
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
alert(
"outerWidth: " + $("div").outerWidth({margin: true}) + "\n" +
"outerHeight: " + $("div").outerHeight({margin: true})
);
}
);
</script>
<style type="text/css">
div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid rgb(200, 200, 200);
background: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>