<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth區別及js與jQuery獲取的方式</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body style="border:1px solid #ccc">
<div id="div" style="width:100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">
</div>
<script type="text/javascript">
var divObj = document.getElementById("div");
//返回元素的寬度（包括元素寬度、內邊距和邊框，不包括外邊距）
var dOffsetWidth = divObj.offsetWidth;
//參數為true，包括外邊距
var $dOffsetWidth = $(divObj).outerWidth(false);
//返回元素的高度（包括元素高度、內邊距和邊框，不包括外邊距）
var dOffsetHeight = divObj.offsetHeight;
var $dOffsetHeight = $(divObj).outerHeight(false);//參數為true，包括外邊距
//返回元素的寬度（包括元素寬度、內邊距，不包括邊框和外邊距）
var dClientWidth = divObj.clientWidth;
var $dClientWidth = $(divObj).innerWidth();
//返回元素的高度（包括元素高度、內邊距，不包括邊框和外邊距）
var dClientHeight = divObj.clientHeight;
var $dClientHeight = $(divObj).innerHeight();
//返回元素的寬度（包括元素寬度，不包括內邊距、邊框和外邊距）
var dWidth = divObj.style.width;
var $dWidth = $(divObj).width();//width(val)設置寬
//返回元素的高度（包括元素高度，不包括內邊距、邊框和外邊距）
var dHeight = divObj.style.height;
var $dHeight = $(divObj).height();//height(val)設置高
//返回元素的寬度（包括元素寬度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientWidth相同
var dscrollWidth = divObj.scrollWidth;
//返回元素的高度（包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距）
//無溢出的情況，與clientHeight相同
var dscrollHeight = divObj.scrollHeight;，
console.log("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight);
console.log("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight);
/*
注意：offsetWidth(offsetHeight)與style.width(style.height)的區別
1. style.height 返回的是字符串，如28px，offsetWidth返回的是數值28，如果需要對取得的值進行計算，用offsetWidth比較方便;如果拿到offsetWidth設置style.left的值，需加'px'。
2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，clientWidth/clientHeight與offsetWidth/offsetHeight是只讀屬性
3. style.height的值需要事先定義，否則取到的值為空。而且必須要定義在html里，如果定義在css里，style.height的值仍然為空，但元素偏移有效；而offsetWidth則仍能取到。
*/
/*
總結：
1、通過style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()獲取/設置元素的寬高
2、若要獲取元素包含邊框的寬度，則可通過divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)獲取
3、通過$(divObj).outerWidth(true)/$(divObj).outerHeight(true)獲取帶外邊距的寬度
4、通過$(divObj).innerWidth()/$(divObj).innerHeight()獲取不包含邊框、不包含外邊距的寬度
*/
</script>
</body>
</html>
摘于此http://blog.csdn.net/javaloveiphone/article/details/50855436
