大家好，欢迎来到IT知识分享网。
上网找了好久没有找到一个offsetLeft在各浏览器的值，自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>offsetLeft和offsetTop</title> <style> *{ margin: 0px; padding: 0px; } body{ width: 500px; height: 200px; padding: 25px; margin: 32px; border: 51px solid yellow; background: pink; /* position: absolute; */ /* 108*/ } #pppd1{ width: 1000px; padding: 1px; margin: 3px; border: 4px solid yellow; position: absolute; /* 8 */ } #ppd1{ width: 1000px; padding: 11px; margin: 3px; border: 4px solid yellow; /* 18 */ } #pd1{ width: 10px; height: 100px; padding: 1px; margin: 3px; border: 6px solid yellow; background: pink; /* 10 */ } #d1{ width: 100px; height: 200px; padding: 20px; margin: 30px; border: 40px solid skyblue; background: pink; } </style> </head> <body> <div id="pppd1"> <div id="ppd1"> <div id="pd1"> <div id="d1"></div> </div> </div> </div> </body> </html> <script> var d1 = document.getElementById('d1'); console.log(d1.offsetLeft); </script> <!-- ie 6/7 () 无论父级怎么改变offset永远不变 offsetLeft = (父padding-left)+(当margin-left) --------------------------------------------------------------------------------- 父级没有定位且父级是body时 firefox offsetLeft = (父padding-left)+(父margin-left)+(当margin-left) ie8/9/10/11 chrome offsetLeft = (父padding-left)+(父margin-left)+(父border-left)+(当margin-left) --------------------------------------------------------------------------------- 父级没有定位且父级有多层时 ie8/9/10/11 chrome （所有父，包括body） offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left) firefox （所有父，不包括body） offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)+ (body的padding-left)+(body的margin-left) -------------------------------------------------------------------------------------- 父级有定位且定位不是在body ie8/9/10/11 chrome 和firefox 向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到定位时,把定位元素的padding-left相加,最后加上自身元素的margin-left offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left) ---------------------------------------------------------------------------------------- 父级有定位且定位是了在body chrome 向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-left offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(有定位父border-left)+(当padding-left) ie8/9/10/11 和firefox 这个和定位不是在body时是一样的 向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-lef offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left) ---------------------------------------------------------------------------------------- 1级父级有定位且定位不是body 在chrome和firefox下,ie还没有测试 offsetLeft =(当margin-left); 所以可以用这个属性去写滑动的效果 --> 转载于:https://www.cnblogs.com/hyx626/p/9840239.html
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/23560.html
