offsetParent 指与位置有关的上级元素 只读
parentNode 指与位置无关的上级元素 只读
function offsetTop(element){ var top=element.offsetTop; var parent=element.offsetParent; while(parent!=null){ top+=parent.offsetTop; parent=parent.offsetParent; } return top; }
这个是获取元素到达顶部位置 其中offsetParent能不能替换为parentNode呢?
我试了一下是不行的,为什么呢?
offsetParent测试了一下最多获取到body元素,在往上获取就是null
console.log(document.getElementById(‘t‘).offsetParent); /*如果整个页面就一个id=t的div获取到的是body,从body往上就是null*/
parentNode最多能获取到document文档对象
console.log(document.documentElement.parentNode); //#document 在往上获取也是null
一开始想这不都是null么?怎么不行 但是返回值是NAN
原来
console.log(document.body.offsetTop); /*输出是0,document.body表示body*/
再看
console.log(document.body.parentNode.offsetTop);/*输出0 ,document.body.parentNode表示html*/
console.log(document.body.parentNode.parentNode.offsetTop); /*输出undefined ,document.body.parentNode.parentNode表示document文档对象*/
因为
document.body.parentNode.parentNode不等于NUll
所以还是可以进入这个while循环 undefined+一个数字=NaN;
所以将offsetParent替换成parentNode是不行的,所以说offsetTop参考的元素应该是document文档对象
总结: offsetParent最多能获取到 body,再往上获取就是null
parentNode最多能获取document文档对象再往上获取就是null
能使用offsetTop属性的最顶级元素是html,如果用html的上一级document用了offsetTop返回undefined,所以offsetTop获取距离的参考元素应该是document文档对象
写到这回想定义的offsetTop()函数,是要在while中换个判断条件也行的哈,,但是多麻烦
时间: 2024-10-13 16:20:27