jQuery中关于height,innerWidth与outerWidth的区别

浏览数：61 / 时间：2015年06月09日

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。公式为height()+padding*2

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。公式为height()+padding*2+边框*2

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。公式为height()+padding*2+边框*2+margin*2

实际例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth());
 $("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width());
    $("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());
$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));
})
</script>
<style type="text/css">
div {
    width:300px;
    height:50px;
    margin:50px;
    padding:50px;
    border:solid 50px red;
}
</style>
<title>demo</title>
</head>
<body>
<div style="border:solid 10px red;">box</div>
</body>
</html>