网站历史权重查询,不会写程序如何做网站,过年做那些网站致富,今天刚刚长沙又增加了一例很多初学者对于JavaScript中的offset、scroll、client一直弄不明白#xff0c;虽然网上到处都可以看一张图#xff08;图1#xff09;#xff0c;但这张图太多太杂#xff0c;并且由于浏览器差异性#xff0c;图示也不完全正确。 图一 不知道大家看到这张图的第一感觉如何… 很多初学者对于JavaScript中的offset、scroll、client一直弄不明白虽然网上到处都可以看一张图图1但这张图太多太杂并且由于浏览器差异性图示也不完全正确。 图一 不知道大家看到这张图的第一感觉如何反正我的感觉就是“这次第怎一个乱字了得”。 既然我认为上图太多太乱那么我就把offset、scroll、client分开说希望能让大家彻底弄清楚今天只说offset。 一、关于offset我们要弄明白什么 w3中offset相关页面是http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface 在这里我们可以看到关于offset共有5个东西需要弄清楚 1、offsetParent 2、offsetTop 3、offsetLeft 4、offsetWidth 5、offsetHeight 我们根据难易程度把以上5点分为三类来讲解。 在分析之前先来看段测试代码 bodystyle typetext/cssbody {border:20px solid #CCC;margin:10px;padding:40px;background:#EEE;}#test {width:400px;height:200px;padding:20px;background:#F60;border:5px solid #888;}/stylediv idtest/divscriptvar test document.getElementById(test);test.innerHTML pBrowser: navigator.userAgent /p poffsetWidth: test.offsetWidth /p poffsetHeight:test.offsetHeight/ppoffsetLeft:test.offsetLeft/ppoffsetTop:test.offsetTop/p;/script
/body 这段代码在各个浏览器中的效果如图 图二IE6/7 图三IE8/9/10 图四Firefox 图五Chrome 二、offsetWidth与offsetHeight 大家可以看到上面图二~图五中的共同点是 offsetWidth与offsetHeight是一致的因此这里放到地起讲。 MDN中对offsetWidth的概述和描述是 Returns the layout width of an element. Typically, an elements offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. 也就是元素的可视宽度这个宽度包括元素的边框(border)水平padding垂直滚动条宽度元素本身宽度等。 offsetHeight跟offsetWidth类似只是方向改为垂直方向上的。 只是我们的示例中没有水平和垂直滚动条。另外经过测试可以发现即使元素加上水平或垂直滚动条offsetWidth跟offsetHeight的值是不会更改的因为浏览器渲染时把滚动条的宽度或高度算在了元素本身的宽度或高度中了。 通过代码及图中数值我们不难看出: offsetWidth(border-width)*2(padding-left)(width)(padding-right) offsetHeight(border-width)*2(padding-top)(height)(padding-bottom) 对这两个概念就总结到这里大家现在弄明白了吗 三、offsetLeft与offsetTop offsetWidth与offsetHeight有个特点就是这两个属性的值只与该元素有关与周围元素父级和子级元素无关。 然而offsetLeft与offsetTop却不是这样这两个属性与offsetParent有关但在我们讲到offsetParent之前我们先不管offsetParent是什么及怎么判断我们只要知道offsetLeft和offsetTop与offsetParent有关就行了上面的示例中offsetParent就是body。 MSDN上对offsetLeft的定义是 Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property 也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。也就是说应该是 offsetLeft(offsetParent的padding-left)(中间元素的offsetWidth)(当前元素的margin-left)。 offsetTop(offsetParent的padding-top)(中间元素的offsetHeight)(当前元素的margin-top)。 但通过上面的例子我们可以看到当offsetParent为body时对于offsetLeft与offsetTop的值有三种分别是IE6/7中的40IE8/9/10 和 Chrome中的70以及FireFox中的50。 通过这些数值我们可以知道当offsetParent为body时情况比较特殊: 在IE8/9/10及Chrome中offsetLeft (body的margin-left)(body的border-width)(body的padding-left)(当前元素的margin-left)。 在FireFox中offsetLeft (body的margin-left)(body的padding-left)(当前元素的margin-left)。 四、offsetParent 终于到offsetParent了。 offsetParent属性返回一个对象的引用这个对象是距离调用offsetParent的元素最近的在包含层次中最靠近的并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。 总的来说两条规则 1、如果当前元素的父级元素没有进行CSS定位position为absolute或relativeoffsetParent为body。 2、如果当前元素的父级元素中有CSS定位position为absolute或relativeoffsetParent取最近的那个父级元素。 上面的示例就是第1条说的情况我们来验证一下 我们把JS改为(添加了一行代码红色部分) var test document.getElementById(test);
test.innerHTML pBrowser: navigator.userAgent /p poffsetParent: test.offsetParent.tagName /p poffsetWidth: test.offsetWidth /p poffsetHeight:test.offsetHeight/ppoffsetLeft:test.offsetLeft/ppoffsetTop:test.offsetTop/p; FireFox下的效果为 图六 在其他浏览器中效果相同都是body。 我们再来验证一下第2条测试HTML如下 !DOCTYPE html
html
headtitleDemo/title
/head
bodystyle typetext/cssbody {margin:0;padding:0;background:#EEE;}div,ul,li {margin:0;}li {height:20px;line-height:20px;}#test {width:400px;height:250px;padding:20px;background:#F60;border:10px solid #888;}#divtest {margin:30px;position:relative;left:50px;top:70px;padding:20px;}/stylediv iddivtestulliTest/liliTest/li/uldiv idtest/div/divscript
var test document.getElementById(test);
test.innerHTML pBrowser: navigator.userAgent /p poffsetParent: test.offsetParent.tagName /p poffsetWidth: test.offsetWidth /p poffsetHeight:test.offsetHeight/ppoffsetLeft:test.offsetLeft/ppoffsetTop:test.offsetTop/p;/script
/body
/html 在FireFox中效果为 图七 在其他浏览器中offsetParent也是一致的。 在这里我们也可以看到第三点中给出的offsetLeft的计算公式是适用的。 小结 以上的总结希望能对大家有所帮助在看完本文内容后再回过头来看文章开头部分的那张图(只看offset)部分是不是清楚了很多 最后对于offsetParent为body的情况现在的主流浏览器IE8/9/10和Chrome及Firefox都跟定义 offsetLeft(offsetParent的padding-left)(中间元素的offsetWidth)(当前元素的margin-left)。 offsetTop(offsetParent的padding-top)(中间元素的offsetHeight)(当前元素的margin-top)。 的不一样对于这一点我也没有弄明白如果有朋友知道请不吝赐教。 本文转自http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html 谢谢~
