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>
运行效果:
jQuery中关于height,innerWidth与outerWidth的区别,布布扣,bubuko.com
时间： 2024-12-22 15:42:03