jquery中各类高度宽度的对比

跟上一篇js的一样，也是各种高度宽度傻傻分不清楚，而jquery也是平时经常使用的库，所以还是自己整理一下。

顺便看一下$(‘html‘),$(‘body‘),$(window),$(document)这几个对象，在不同的api下的取值情况。（也是傻傻分不清楚）

举个栗子。以下的测试，都是在这个的基础上进行取值的。

<style>*{margin:0;padding:0}
body{padding:20px;margin:0;border:1px solid #000;}
#div1{height:2000px;background:red;margin:10px;padding:20px;border:1px solid #000;}
#div2{width:200px;height:200px;overflow:scroll;background:green;position:absolute;left:100px;top:100px;margin:10px;padding:20px;border:1px solid #000;}
#div3{height:1000px;width:1000px;margin:10px;padding:20px;border:1px solid #000;}
</style>

<script>
        $(function(){
            var $div1 = $(‘#div1‘);
            var $div2 = $(‘#div2‘);
            var $div3 = $(‘#div3‘);
            var $html = $(‘html‘);
            var $body = $(‘body‘);
            var $win = $(window);
            var $doc = $(document);

            console.log($div1.height());
            console.log($div2.height());
            console.log($div3.height());
            console.log($html.height());
            console.log($body.height());
            console.log($win.height());
            console.log($doc.height());
        })
</script>

<div id="div1">
    <div id="div2">
        <div id="div3">
        </div>
    </div>
</div>        

height()

api document : Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

获取所匹配的对象组中的第一个对象的计算后的高度，或者设置选定的所有对象的高度。

$div1 = 2000
$div2 = 200
$div3 = 1000
$html = 2124 ( $body的基础上 + 20*2[$body的内填充] + 10*2[$body的外边距] + 1*2[$body的边框]  )
$body = 2062 ( 2000[$div1的高度] + 20*2[$div1的内填充] + 1*2[$div1的边框] + 10*2[$div1的外边距] )
$win = 392 ( 整个浏览器可视高度 - 控制台的高度！！！如果不开启控制台，那么获取的将是浏览器的可视高度 )
$doc = 2124 ( 与$html计算相同 )

该值获取的是对象的实际高度，不包括border，padding，margin。如果自身没有设定高度值，则会取自身内部元素的高度总和。

innerHeight()

api document : Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

获取所匹配的对象组中的第一个对象的计算后的高度，该高度包含内填充但是不包含边框和外边距，或者设置选定的所有对象的高度。

$div1 = 2040 ( 2000 + 20*2 )
$div2 = 240 ( 200 + 20*2 )
$div3 = 1040 ( 1000 + 20*2 )
$html = 2124 ( $body的基础上 + 10*2[$body的外边距] + 1*2[$body的边框] )
$body = 2102 ( 2000[$div1的高度] + 20*2[$div1的内填充] + 1*2[$div1的边框] + 10*2[$div1的外边距] + 20*2[$body的内填充] )
$win = 302
$doc = 2124 (与$html计算相同)

该值和height()相差不大，不同的是将padding也计算进来了。

outerHeight()

api document : Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without “px”) representation of the value or null if called on an empty set of elements.

获取所匹配的对象组中的第一个对象的计算后的高度，该值包括内填充、边框、以及可选的外边距（括号内的参数为true既可）。返回数字形式的值或者空值（如果是空对象的话）。注意：该api不能用来设置高度。

$div1 = 2062 ( 2000 + 20*2 + 10*2 + 1*2 )
$div2 = 262
$div3 = 1062
$html = 2124 ( 2000[$div1的高度] + 20*2[$div1的内填充] + 1*2[$div1的边框] + 10*2[$div1的外边距] + 20*2[$body的内填充] + 10*2[$body的外边距] + 1*2[$body的边框] )
$body = 2124 (与$html计算相同)
$win = 302
$doc = 2124 (与$html计算相同)

以上值都是在outerHeight(true)的情况下取值的。

该值在innerHeight的基础上又加上了外边距的值。

scrollTop()

api document : Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

获取所匹配的对象组中的第一个对象的距离滚动条顶部的高度，或者设置选定的所有对象的滚动高度。

chrome下的取值

$div1 = 0
$div2 = 0
$div3 = 0
$html = 0
$body = 400
$win = 400
$doc = 400

ff下的取值

$div1 = 0

$div2 = 285

$div3 = 0

$html = 528

$body = 0

$win = 528

$doc = 528

以上结果都是在随意滚动滚动条以后测量的，请关心数值出现的位置而不是数值本身。

可以看出，chrome下的scrolltop是挂载在body上的，而ff中则是挂载在html下的。

结束啦，整理一下以后再搞不清楚可以重新来看一遍。

如果我的测试有什么不妥的地方，欢迎指正~~~