知识储备：
1.偏移参照（offsetParent)：
在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关
定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况
【1】元素自身有fixed定位，offsetParent的结果为null
当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
【2】元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
【3】元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
【4】<body>元素的parentNode是null
2.偏移量(offset dimension)：
涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。
【1】offsetWidth
offsetWidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)
【2】offsetHeight
offsetHeight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)
[注意]如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度
【3】offsetTop
offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
【4】offsetLeft
offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
解决方案
我们可以先获取它的offset它这是相对父容器的距离。然后使用递归来层层获取上一级的offset。
var getOffsetLeft = function(obj){
var tmp = obj.offsetLeft;
var node= obj.offsetParent;
while(node!= null){
tmp += node.offsetLeft;
node= node.offsetParent;
}
return tmp;
}
var getOffsetTop = function(obj){
var tmp = obj.offsetTop;
var node= obj.offsetParent;
while(node!= null){
tmp += node.offsetTop;
node= node.offsetParent;
}
return tmp;
}
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
