转载出处于:https://blog.csdn.net/Real_Bird/article/details/52356471
jQuery中的高度与定位(offset(),position())
我们知道,高度或者宽度是由外边距(margin)、边框(border)、元素样式定义的高度或宽度(height/width)、内边距(padding)组成的。
height()与outerHeight()的不同
height():Get the current computed height for the first element in the set of matched elements。
也就是拿到第一个匹配的元素计算后的高度。那么什么是计算后的高度呢?
我们可以用window.getComputedStyle(domElement,伪元素/null)
这个对象来获得。在IE中的写法是domElement.currentStyle
这个对象来获得。所以兼容的写法是:
var oStyle = function(domEle){
return window.getComputedStyle(domEle,null) || domEle.currentStyle
}
outerHeight():Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin。
拿到第一个匹配的元素计算后的高度,包括padding,border。也可能包括margin(通过设置参数true实现)。也就是说,它至少包括内边距、边框。
对比我们可以明显发现了,outerHeight()>=height();并且他们是没有单位(如px)的。而要通过oStyle拿到样式(如高度)是有单位的。oStyle(document.getElementById('box')).height
。
$(window).height()
总是返回视口的高度。就是我们写的页面的可见区域。不包括滚动条导致的不可见区域。
$(document).height()
整个页面所有的高度,包括不可见区域。包括内边距(padding),边框(border),外边距(margin)。有趣的是,它的值总是与document.body.outerHeight(true)
的值相等。至少在chrome 52 和 firefox 47是这样,当然可能的是,我没有考虑到所有情况,还有遗漏的情况,欢迎补充啊。
$(document.body).height()
就是body的高度。由元素填充起来的body的高度。不包括body自身设置的padding,border,margin。
$(‘div.box:first’).offset().top
与原生Javascript所不同的是,这里的offset()是相对于文档的。w3c给出的解释是:
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
这个解释有点模糊啊。文档?padding算不算?border算不算?margin算不算?哎呀,到底算不算啊!!!
答案是:算!算!算!都算!从div.box:first的border最外边开始(margin不算在内,margin在border外,有margin距离会减小。可以脑补一下)到文档的顶端—-文档margin的最外端。简单点:$(div.box:first).outerHeight()的border最外端(没margin)与$(document.body).outerHeight(true)的顶端(margin的最外部分)的距离。**在我的测试中是60。见下图和关键代码。
而JavaScript中的offsetTop是相对于父元素的。无论父元素是不是body元素。
$(‘div.box:first’).position().top
这个类似于原生JavaScript中的offsetTop。是相对于父元素的。
根据我的实验。这个距离是div.box:first元素的外边距(margin)的顶端与父元素(这里是wrapper,和body重叠了)开始的地方的距离,是不包括body的内边距的。简单点:$(div.box:first).outerHeight(true)顶端(最外部分)与$(document.body).height()的顶端(元素起始部分)的距离。在我的测试中是20。见下图和关键代码。
一图胜千言啊。下面贴张图大家都会明白的。再加上关键代码:
body{
border:10px solid aquamarine;
margin:15px;
padding:7px;
}
.box{
width:100px;
height:100px;
background:red;
}
.wrapper{
position:relative;
}
div.box:first-child{
position:absolute;
top:20px;
margin:8px;
padding:10PX;
background:green;
border:10px solid yellow;
}
小结
height:仅仅是样式的height属性。
outerHight:包括内边距,边框。
outerHeight(true):包括内边距,边框,外边距。
offset().top:当前元素border最外边(没有边框从元素顶部开始算)和body顶端(页面可视区域最上端)距离。
position().top:当前元素margin最外边和body中元素开始部分的距离。
</article>