前言
最近几天忙着找实习的事情，然后就没有更新啦>0<，然后今天要开始继续学习啦。
原生JavaScript里面有几个系列来获取元素的尺寸。
原生属性
偏移量系列
- offsetWidth
- offsetHeight
- offsetLeft
- offsetTop
- offsetParent：距离元素最近的定位（relative、absolute）祖先元素，可递归上溯。
offsetWidth/offsetHeight = 元素内容 + padding + border。
客户区系列
- clientWidth
- clientHeight
用于描述元素的内尺寸：元素内容+两边内边距
滚动大小
- scrollWidth
- scrollHeight
- scrollLeft
- scrollTop
scrollWidth/scrollHeight：元素内容的总高度或宽度。
scrollTop/scrollLeft：元素滚动条位置。
在浏览器中的区别在于：
IE6、IE7认为scrollHeight是网页内容实际高度，可以小于clientHeight。FF、Chrome 认为scrollHeight是网页内容高度，不过最小值是clientHeight。
浏览器窗口的滚动条位置：window对象的 pageXoffset 和 pageYoffset , IE8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。
一些细节
document.documentElement与document.body
document.body是DOM中Document对象里的body节点。
document.documentElement是文档对象根节点(html)的引用。
IE 在怪异模型下document.documentElement无法正确取到clietHeight、scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为盒子模型的一部分。
$(window).width() 代表了当前浏览器可见区域的宽度
$(document).width() 则代表了整个文档的宽度，可以有滚动内容
1 元素的宽素可以是内联或者通过link定义,所以通过style是不可取的
2 元素在隐藏状态下是不能获取任何尺寸的 display:none
3 CSS3引入了box-sizing的设置
jQuery.css(elem, type, extra)
/^(none|table(?!-c[ea]).+)/test(jQuery.css(elem, "display")) //。jQuery就会对元素增加position: absolute; visibility: hidden;
function getStyles(elem) {
return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};
这里defaultView在浏览器中返回的是Document的Window对象。
window.getComputedStyle(“元素”, “伪类”)返回当前元素的所有样式。它只能获取样式，是只读的，并且它获得的是元素最终的样式，不仅仅是style属性里写的。
然后为什么用defaultView，其实是差不多的，可以看大佬的博客谈到的:
http://www.zhangxinxu.com/wor…
另外IE还有一个element.currentStyle，也是元素最终的样式。
//交换元素样式（获取到display为none的宽度）
function swap(elem, options, callback, args) {
var ret, name,
old = {};
//遍历options的属性，付给传入元素，并且保存原来元素对应的属性
for (name in options) {
old[name] = elem.style[name];
elem.style[name] = options[name];
}
//下面的代码是相当于执行了getWidthOrHeight函数获取到了宽度
ret = callback.apply(elem, args || []);
//再复原元素
for (name in options) {
elem.style[name] = old[name];
}
return ret;
};
//获取当前样式
function curCSS(elem,name) {
var computed = getStyles(elem);
var ret = computed.getPropertyValue(name) || computed[name];
return ret;
}getPropertyValue()在上面大佬的文章里也有提到过，就是获取属性值的。在IE中则使用getAttribute方法，但是它在拿style属性值的时候，前者可以不用驼峰式写法，后者则必须。
//获取宽高
function getWidthOrHeight( elem, name, extra ) {
val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
styles = getStyles( elem ),
//borderBox情况
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
// IE11全屏的时候在iframe里的元素会缩小100辈
// In IE 11 fullscreen elements inside of an iframe have
// 100x too small dimensions (gh-1764).
if ( document.msFullscreenElement && window.top !== window ) {
if ( elem.getClientRects().length ) {
val = Math.round( elem.getBoundingClientRect()[ name ] * 100 );
}
}
// 一些没有设置HTML属性的元素获取offsetWidth会返回undefined
if ( val <= 0 || val == null ) {
//获取元素样式的值
val = curCSS( elem, name, styles );
if ( val < 0 || val == null ) {
val = elem.style[ name ];
}
// 计算单位不是px，所以直接返回
if ( rnumnonpx.test( val ) ) {
return val;
}
valueIsBorderBox = isBorderBox &&
( support.boxSizingReliable() || val === elem.style[ name ] );
// 以防出现""和"auto"值
val = parseFloat( val ) || 0;
}
return ( val +
augmentWidthOrHeight(
elem,
name,
extra || ( isBorderBox ? "border" : "content" ),
valueIsBorderBox,
styles
)
) + "px";
}计算display为none的元素的宽度
var cssShow = {
display: "block",
position: "absolute",
visibility: "hidden"
}
$('#test2').click(function(){
var elem = div;
function width() {
if( /^(none|table(?!-c[ea]).+)/.test(curCSS(div, 'display')) ){
return swap(elem, cssShow, function() {
return getWidthOrHeight(elem, 'width', 'content');
})
}
}
show('模拟jQuery.width的处理: '+ width())
})偏移算法
innerWidth、innerHeight
用于获得匹配集合中第一个元素的当前计算的内部宽高（包括padding，但不包括border），或 设置每一个匹配元素的内部宽高。
outerWidth、outerHeight
获取元素集合中第一个元素的当前计算宽高度值，包括padding，border和选择性的margin。
var cssExpand = ["Top", "Right", "Bottom", "Left"];
/**
* 额外处理高度/宽度
* elem：目标元素
* name：目标测量（width/height）
* extra：包括的最外层内容
* isBorderBox：是怪异模式盒子吗
* styles：样式
*/
function augmentWidthOrHeight(elem, name, extra, isBorderBox, styles) {
var i = extra === (isBorderBox ? "border" : "content") ?
// 如果isBorderBox有值，则直接i=4，跳过下面的循环，就避免额外的步骤
4 :
// 否则初始化垂直水平的属性，如果是width，name就是1，否则就是0
name === "width" ? 1 : 0,
val = 0;
/*
* width：如果i=1，则循环只会加上right和left
* height：如果i=0，则循环只会加上top和bottom
*/
for (; i < 4; i += 2) {
// 如果extra是margin就把margin都加上
if (extra === "margin") {
val += jQuery.css(elem, extra + cssExpand[i], true, styles);
}
// 如果是怪异模型
if (isBorderBox) {
//width包含了padding，所以如果exrta是content的话要去除padding
if (extra === "content") {
val -= jQuery.css(elem, "padding" + cssExpand[i], true, styles);
}
//如果extra不是margin的话，还要减去2边的宽度
if (extra !== "margin") {
val -= jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
}
} else {
//因为不是怪异模型，所以直接再加上padding
val += jQuery.css(elem, "padding" + cssExpand[i], true, styles);
// extra不可能是padding了（上面加过了），所以再加上border
if (extra !== "padding") {
val += jQuery.css(elem, "border" + cssExpand[i] + "Width", true, styles);
}
}
}
return val;
}首先获取基本的offsetWidth和offsetHeight，要得到下面几个值，再加上这个函数的结果即可。
innerWidth：augmentWidthOrHeight(elem, ‘width’, “padding”, true, styles)
innerHeight：augmentWidthOrHeight(elem, ‘height’, “padding”, true, styles)
outerWidth：augmentWidthOrHeight(elem, ‘width’, “border”, true, styles)
outerHeight：augmentWidthOrHeight(elem, ‘height’, “border”, true, styles)
