javascript之--offset家族

标签:

   在javavscriprt中,有一些很有特点的家族,他们有的是因为浏览器的兼容问题而出名,有的是因为其重要的作用而出名,总之对这些pinyi家族的理解和解决他们的兼容性问题显得很是繁琐,这篇文章就是对家族成员之一offset家族的成员做一些简单的理解和兼容性问题的介绍。其后会有其他家族的介绍,希望对你的学习有些帮助吧。

   首先我们来说offset,他的中文意思呢,就是偏移量,所以我们也称它们为“偏移量家族”,这个家族的主要成员有,offsetParent,

offsetWidth,offsetHeight,offsetTop,offsetLeft。至于offsetRIght和offsetBottom在W3C标准文档中并没有提及。“偏移量家族”的兼容性真的很不好,每次我们使用时都要考虑一大堆的兼容问题,比如offsetWidth在IE浏览器和主流的浏览器当中计算的尺寸是不同的,还有offsetLeft属性,这让我们大为头疼。

     在这里要注意一点,所谓的偏移量家族的这些个属性都是Element的属性,属于DOM中的内容,这一点要看清了。   

说了这么多兼容问题,接下来看看具体是怎样造成这些问题的?

   (1)offsetParent 

              因为偏移量家族的Element的属性,所以每一个元素都具有offsetParent这个属性,它用来获取自己的祖先元素中,并且是已经定位的祖先元素,还有优先获取距离自己最近的元素,如果没有定位的祖先元素了,就是以body为其参考,获取body的标签。

技术分享

     因为box2参考box1的位置定位,所以输出的内容为box1的内容,那么如果对box2的祖先元素box1没有定位的话,那么输出的结果就是boby的内容了,这是针对高级浏览器而言的。。

 

          在IE6和IE7浏览器之中,这个属性的结果就不是我们所想像的了,兼容性问题由此而来。和其他高级浏览器不同,主要是分为以下的几种情况。

          (1)自己如果没有设置自己定位的话,那offsetParent参考的就是距离自己最近的祖先元素,但要求是这个祖先元素必须设置了宽和高;那么如果自己没有定位的话,但是祖先元素使用定位的话,即使没有宽高,也作为参考;

          (2)如果自身是有定位,就和高级浏览器一样了。

         所以为了解决这个问题,在使用时给自己本身的样式中增加定位,这样就和高级浏览器一样了。

       (2)offsetLeft

           该属性是用来获取从自己的外边框,到自己参考的祖先元素offsetParent元素的内边框的距离,前面介绍的offsetParent的兼容性问题,就是希望所参考的元素不影响我们offsetLeft值得获取,值得一提的是,对于IE8,他的offsetParent属性和高级浏览器一样,但是他的offsetLeft属性的计算是从自己的外边距到offsetParent元素的外边框,这与其他的浏览器不同。

 技术分享          技术分享  

      因为IE8的兼容问题,所以在设置样式时最好不要给自己的参考父容器设置边框。记住这样一句“自定位,父无边”。

      (3)offsetWidth

          获取盒子的真实宽度,即左右padding+左右border+width;他的兼容性很好,没有什么兼容问题。但有几点注意;

           1.如果我们的盒子没有设置宽度,那么浏览器会自己计算宽度,并不是所谓100%;

              计算公式:当前页面的宽度—margin;

             技术分享技术分享

javascript之--offset家族

扫一扫手机访问