元素的尺寸不仅与width和height相关,还与border,margin,padding有关,对于元素尺寸的处理,对于元素的精确定义有很重要的意义,JQuery对尺寸的处理提供了相关的
函数,便于我们方便的使用。
下面以宽度相关的属性为例,高度用法完全相同。
1,width(),返回元素的宽度,不包括内边距,边框和外边距;
2,innerWidth()返回元素的宽度(包括内边距);
3,outerWidth()返回元素的宽度(包括内边距边框和外边距);
以上返回值都是int类型。
代码示例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-type" content="text/html,charset=utf-8"/>
<title></title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#div1{
border: 1px solid blue;
padding: 10px;
margin: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
$(document).ready(function(){
var div=$("#div1");
var Wid=div.width();
var innerWid=div.innerWidth();
var outWid=div.outerWidth();
var outerWid=div.outerWidth(true);
alert(Wid+","+innerWid+",,"+outerWid+",,"+outerWid);
});
</script>
</html>