jQueryouterWidth()和outerHeight()方法分别获取或设置元素的外部宽度和外部高度。此外宽度和高度包括padding和border，但不包括在margin该元件上。以下示例将<div>在单击按钮时返回元素的外部宽度和高度。
例试试这个代码»
<script>
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth();
var divHeight = $("#box").outerHeight();
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>
您还可以得到外宽度和高度，包括padding和border还有margin的元素。为此，只需指定true外部宽度方法的参数即可，例如outerWidth(true)和outerHeight(true)。
例试试这个代码»
<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>
同样，您可以通过将值作为参数传递给outerWidth()andouterHeight()方法来设置元素的外部宽度和高度。这些方法仅更改元素内容区域的宽度或高度以匹配指定的值，例如innerWidth()和innerHeight()方法。
例如，如果元素的当前宽度为300像素，并且左和右填充的总和等于50像素，并且左边框和右边框的宽度的总和是新宽度的20像素。将外部宽度设置为400像素后，元素为330像素，即New Width = Outer Width - (Horizontal Padding + Horizontal Border)。同样，您可以在设置外部高度时估算高度的变化。
例试试这个代码»
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").outerWidth(400).outerHeight(300);
});
});
</script>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery