关于offsetLeft和offsetTop的兼容性问题

不试一下怎么知道自己不可以?

首先我们要看下offsetLeft和offsetTop他们两的API的作用;元素相对于offsetParent的左边距和上边距(为什么没有bottom,right呢?

我想应该是文本流的原因,根本用不到),那么兼容性就来了就是什么情况下,在不同的浏览器中offsetParent是不一样的

那么什么是offsetParent:

offsetParent是偏移量的参考盒子,是元素的祖先元素中的某一个,不一定就是父元素

IE8+等高级浏览器中

offsetParent就是离自己最近的定位了的元素(relative,absolute,fixed),如果祖先元素都没有定位那么这个元素的offsetParent就是body

当还有一个地方需要注意的就是,ie8中计算出来的值是有含有offsetParent的边框的值的

IE6,IE7中

在元素没有设置定位的时候,那么offsetParent就是一个离自己最近的,有定位的或者没有定位但是又高或宽的祖先元素

在元素设置了定位的时候,那么offsetParent就是下一个定位元素(和高级浏览器一样)offsetParent

总结

我们要用offsetLeft的时候可以给自己设置定位,同时不要给offsetParent设置边框,这里我还要说明offsetParent不一定于父元素,offsetParent是偏移量的参考盒子,是元素的祖先元素中的某一个

计算一个元素在页面上的偏移量的值(在offsetParent没有边框的情况下)

function getElemenLeft(element){
	var actualLeft = element.offsetLeft;
	var current  = element.offsetParent;
	while(current != null){
		actualLeft += current.offsetLeft;
		var current = current.offserParent;
	}
	return actualLeft;
}

思路就是判断我是否有offsetParent(偏移量参考盒子),有的话就累加用循环,在不知道次数的情况下用while(){}循环,遍历,最终返回一个返回值。

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值