js获取元素位置方法总结

console.log(document.documentElement.scrollHeight)  // 3191 文档高度console.log(document.documentElement.clientHeight)  // 759  视口高度console.log(document.documentElement.offsetHeight)  // 3191 文档高度console.log(document.documentElement.scrollTop)     // 700  滚动距离

console.log(document.body.scrollHeight)    // 3191 文档高度console.log(document.body.clientHeight)    // 3191 文档高度console.log(document.body.offsetHeight)    // 3191 文档高度console.log(document.body.scrollTop)       // 0    无法获得滚动距离

console.log(document.documentElement.scrollHeight)  // 759  视口高度
console.log(document.documentElement.clientHeight)  // 759  视口高度
console.log(document.documentElement.offsetHeight)  // 342  文档高度
console.log(document.documentElement.scrollTop)     // 0  滚动距离

console.log(document.body.scrollHeight)    // 342 文档高度
console.log(document.body.clientHeight)    // 342 文档高度
console.log(document.body.offsetHeight)    // 342 文档高度
console.log(document.body.scrollTop)       // 0   无法获得滚动距离

console.log(odiv.scrollHeight)     // 200 height+(padding-top)+(padding-bottom)console.log(odiv.clientHeight)     // 200 height+(padding-top)+(padding-bottom)console.log(odiv.offsetHeight)     // 300 height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)console.log(odiv.scrollTop)        // 0console.log(odiv.clientTop)        // 50 border-topconsole.log(odiv.offsetTop)        // (margin-top)+(parent元素的margin-top)

console.log(odiv.scrollHeight)     // 1535 clientHeight + 超出内容的高度console.log(odiv.clientHeight)     // 200 height+(padding-top)+(padding-bottom)console.log(odiv.offsetHeight)     // 300 height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)console.log(odiv.scrollTop)        // 1335 滚动条滚去的高度console.log(odiv.clientTop)        // 50 border-topconsole.log(odiv.offsetTop)        // (margin-top)+(parent元素的margin-top)

console.log(e.pageY)     // 1869 距文档头距离console.log(e.clientY)   // 751  距视口距离console.log(e.offsetY)   // 13   距事件元素距离