内容简介:接下来我们依然讨论盒模型中的offset系列:offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent正如在上一篇文章
接下来我们依然讨论盒模型中的offset系列:offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent
offsetWidth/offsetHeight
正如在上一篇文章 https://segmentfault.com/a/11... ,在这里在写一遍,希望把几个类似的词放在一起去理解可以更好的区分他们的意思。
-
offsetWidth
就是当前元素的宽度width,包括边框、padding、以及内容的宽度,即:
offsetWidth === border(left/right) + padding(left/right) + 内容的宽度(width); //或者 offsetWidth === clientWidth + border(left/right);
-
offsetHeight
就是当前元素的高度height,包括边框、padding、以及内容的高度,即:
offsetHeight === border(top/bottom) + padding(top/bottom) + 内容的高度(height); //或者 offsetHeight === clientHeight + border(top/bottom);
offsetParent
offsetParent:是指父级参照物。父级参照物不是父级元素,父级参照物与父级元素无关。父级参照物默认是body,如果我们给当前元素的父元素设置了position(等于relative|absolute|fixed)在会改变父级参照物。因为一旦我们给父元素设置了position会影响文档流。
例如有这样的文档结构:
//DOM结构 <div id="outer" class="outer"> <div id="inner" class="inner"> <div id="center" class="center"> </div> </div> </div> //css .outer{ width: 260px; height: 260px; border: 20px solid red; margin: 20px auto; } .inner{ width: 160px; height: 160px; border: 20px solid green; margin: 20px auto; } .center{ width: 60px; height: 60px; border: 20px solid blue; margin: 20px auto; }
我们可以在控制台这样查看center、inner、outer的父级参照物
center.offsetParent.tagName //=> "BODY" inner.offsetParent.tagName //=> "BODY" outer.offsetParent.tagName //=> "BODY"
由此可以说明,如果不给div设置position属性,那么默认的div的父级参照物都是body
下面我们给outer、inner都设置了position:relative会发生什么?
//DOM不发生变化,我们把CSS修改成下面这样 .outer{ ***position: relative;*** width: 260px; height: 260px; border: 20px solid red; margin: 20px auto; } .inner{ ***position: relative;*** width: 160px; height: 160px; border: 20px solid green; margin: 20px auto; } .center{ width: 60px; height: 60px; border: 20px solid blue; margin: 20px auto; }
此时我们在控制台查看center、inner、outer的父级参照物
center.offsetParent //=> div#inner.inner inner.offsetParent //=> div#outer.outer outer.offsetParent //=> body
由此可见,给父级设置position可以改变父级参照物。
offsetLeft/offsetTop
offsetLeft/offsetTop:是指当前元素相对于父级参照物的偏移量。
在标准浏览器中是指:当前元素的左边框的外沿到父级参照物边框的内沿,如上图中的4,5,6所示。
在IE8中,offsetLeft是指:当前元素的左边框的外沿到父级参照物的外沿,如上图中的7,8,9所示。
用offsetLeft/offsetTop我们可以计算出当前元素的坐标(即当前元素距离body顶部和body左边的距离)
offsetLeft/offsetTop 和 clientLeft/clientTop的区别
offsetLeft/offsetTop:是指当前元素相对于父级参照物的偏移量。
clientLeft/clientTop:
//clientLeft:盒子左边框的宽度。 clientLeft === paddingLeft; //clientTop:盒子上边框的高度。 clientTop === paddingTop;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++沉思录
Andrew Koenig、Barbara Moo / 黄晓春、孟岩(审校) / 人民邮电出版社 / 2002-11-01 / 50.00元
《C++ 沉思录》集中反映了C++的关键思想和编程技术,不仅告诉你如何编程,还告诉你为什么要这样编程。本书曾出现在众多的C++专家推荐书目中。 这将是C++程序员的必读之作。因为: 它包含了丰富的C++思想和技术,从详细的代码实例总结出程序设计的原则和方法。 不仅教你如何遵循规则,还教你如何思考C++编程。 既包括面向对象编程也包括泛型编程。 探究STL这一近年来C++最重要的新成果的内在思想。一起来看看 《C++沉思录》 这本书的介绍吧!