偏移算法，jQuery源码解析（DOM与核心模块）教程-慕课网

index.html
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<title>jQuery.width</title>
	<style type="text/css">
		div{
			width: 3000px;
			height: 100px;
			border: 5px solid #ccc;
		}
	</style>
</head>
<body>
 
<div id="aaron" style="background:red;border:20px solid #ccc;">尺寸算法</div>
 
<button id="test1">Width</button>
<button id="test2">Height</button>
<button id="test3">innerWidth</button>
<button id="test4">innerHeight</button>
<button id="test5">outerWidth(true)</button>
<button id="test6">outerHeight(true)</button>
 
<script type="text/javascript">
 
 
var cssExpand = ["Top", "Right", "Bottom", "Left"];
 
function augmentWidthOrHeight(elem, name, extra, isBorderBox, styles) {
	var i = extra === (isBorderBox ? "border" : "content") ?
	// If we already have the right measurement, avoid augmentation
	4 :
	// Otherwise initialize for horizontal or vertical properties
	name === "width" ? 1 : 0,
		val = 0;
 
	for (; i < 4; i += 2) {
		// both box models exclude margin, so add it if we want it
		// 如果引入了margin
		// outerWidth(true) 
		// outerHeigth(true) 
		// marginRight
		// marginLeft
		// marginTop
		// marginBottom
		if (extra === "margin") {
			val += jQuery.css(elem, extra + cssExpand[i], true, styles);
		}
 
		if (isBorderBox) {
			// border-box includes padding, so remove it if we want content
			//paddingRight
			//paddingLeft
			if (extra === "content") {
				val -= jQuery.css(elem, "padding" + cssExpand[i], true, styles);
			}
 
			// at this point, extra isn't border nor margin, so remove border
			// 减去2边的宽度
			//borderRightWidth
			//borderLeftWidth
			//borderTopHeight 
			//borderBottomHeight
			if (extra !== "margin") {
				val -= jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
			}
		} else {
			// at this point, extra isn't content, so add padding
			val += jQuery.css(elem, "padding" + cssExpand[i], true, styles);
 
			// at this point, extra isn't content nor padding, so add border
			if (extra !== "padding") {
				val += jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
			}
		}
	}
	return val;
}
//获取最终属性
//https://github.com/jquery/jquery/pull/524
var getStyles = function(elem) {
	return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};
var elem = document.getElementById('aaron');
$('#test1').click(function() {
	alert( elem.offsetWidth)
})
$('#test2').click(function() {
	alert(elem.offsetHeight)
})
$('#test3').click(function() {
	var val = elem.offsetWidth;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'width', "padding", true, styles))
})
$('#test4').click(function() {
	var val = elem.offsetHeight;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'height', "padding", true, styles))
})
$('#test5').click(function(){
	var val = elem.offsetWidth;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'width', "border", true, styles))
})
$('#test6').click(function(){
	var val = elem.offsetHeight;
	var styles = getStyles(elem)
	alert(val + augmentWidthOrHeight(elem, 'height', "border", true, styles))
})
</script>
</body>
</html>
偏移算法

任务
