这里面IE8-和IE9+等现代浏览器有个差别，使用document.documentElement.getBoundingClientRect();IE8-的top/left值为-2px；其他现代浏览器top/left值为0px；可以看出IE8-浏览器是以窗口的（2,2）坐标为原点坐标的。
浏览器会默认body和窗口之间有8px的间隙，所以使用document.body.getBoundingClientRect(); 得到的top/left值为8px。
offset的设置方法如下（以top为例）：
需要注意在设置之前，如果当前elem的position为static则要设置为relative才能处理
先得到要设置给elem的css特征top的值计算方法为
setTop = （要设置的offset top值 – 当前元素的offset top值）+ elem的css top特征值
然后将setTop设置给elem的css top特征。
jQuery的处理就变成了：
var curElem = jQuery( elem ), curOffset = curElem.offset(), curCSSTop = jQuery.css( elem, "top" ), props = {}, curPosition = {}, curTop; //如果top值为auto且position为absolute或fixed则需要计算当前elem的css特征top的值 if ( calculatePosition ) { curPosition = curElem.position(); curTop = curPosition.top; } else { curTop = parseFloat( curCSSTop ) || ; } if ( options.top != null ) { props.top = ( options.top - curOffset.top ) + curTop; } curElem.css( props );
b.jQuery.fn.position
position只能获取不能设置，获取方法如下（以top为例）：
position.top = elem的offsetTop - elem被定位的祖辈元素的offsetTop – elem的marginTop值
这里面这个top就真的是elem的css属性top的值了。对于jQuery来说这个elem把width+padding+border+margin看成了一个整体，所以最终得到的top是elem这个整体距离被定为祖辈元素顶部内边的距离。
jQuery的处理变成了：
var offsetParent, offset, parentOffset = { top: 0, left: 0 }, elem = this[ 0 ]; //当元素为fixed定位是他的被定位的祖辈元素是window视窗(parentOffset = {top:0, left: 0} if ( jQuery.css( elem, "position" ) === "fixed" ) { //假设getBoundingClientRect可用 offset = elem.getBoundingClientRect(); } else { //获取offsetParent offsetParent = this.offsetParent(); // Get correct offsets offset = this.offset(); if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) { parentOffset = offsetParent.offset(); } //增加边框 parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true ); } return { top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ) };
里面jQuery.fn.offsetParent()函数获取最近的祖先定位元素。
offsetParent: function() { return this.map(function() { var offsetParent = this.offsetParent || document.documentElement; while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) { offsetParent = offsetParent.offsetParent; } return offsetParent || document.documentElement; }); }
c.jQuery.fn.scrollLeft和jQuery.fn.scrollTop
这两个函数的获取和设置滚动条位置比较简单，以scrollTop为获取无非就只有两个函数window[ pageYOffset]或elem [scrollTop]。而设置直接使用window[scrollTo]或elem[scrollTop]
以上内容是小编给大家介绍的关于jQuery 1.9.1源码分析系列（十三）之位置大小操作，希望大家喜欢。
您可能感兴趣的文章: