<!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>
