新做一个组件,在网站内使用很广泛,不想依赖任何框架,纯手工打造,结果发现以前常用的计算offsetLeft、offsetTop的函数有时候不好用了,算出的值不对。
网上很流行的方法,不用框架时,我就用这方法:
firefox中到某些元素的offsetTop的值不对,反复测试发现和其父元素定位方式有关系,父元素用fixed定位,得到的offsetTop并没有加documentElement.scrollTop的值。用jquery.offset()方法就不存在这个问题,顺藤摸瓜看了看jquery源码,offset方法很复杂,如果documentElement有getBoundingClientRect方法,它用getBoundingClientRect去计算offset,如果没有这方法就惨了,要得到精确地offset就需要考虑元素是否表格单元格、父元素的position情况。从这点可以看出jquery基础库的功力不一般,兼容性做得很细致。
ff3.5 ie6以上 safari opera chrome都支持getBoundingClientRect方法,如果对兼容性要求不是很高可以用下面的代码
计算时需要减去clientTop clientLeft,否则有时还是会差几个像素。