判断盒子的绝对偏移值

时间 2019-11-08
标签判断盒子绝对偏移栏目 CSS 繁體版
原文原文链接
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>JS盒子模型属性</title> <style> * { margin: 0; padding: 0; } .outer { box-sizing: border-box; margin: 20px auto; width: 500px; height: 500px; background: lightcoral; border: 10px solid orangered; position: relative; } .box { box-sizing: border-box; margin: 20px auto; padding: 15px; width: 300px; height: 300px; border: 10px solid lightblue; background: lightcyan; font-size: 18px; line-height: 30px; overflow: auto; } </style> </head> <body> <div class="outer" id="outer"> <div id="box" class="box"> 夫君子之行，静以修身，俭以养德，非淡泊无以明志，非宁静无以至远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫漫则不能励精，险躁则不能冶性，年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及~~ </div> </div> <script> /* * offset：获取当前元素距离BODY的左/上偏移（不论其父参照物是谁） * @params * curEle:current element当前要操做的元素 * @return * [object]包含上/左偏移的信息 => {top:xxx,left:xxx} * by LYR on 2019/08/14 */ function offset(curEle) { let par = curEle.offsetParent, l = curEle.offsetLeft, t = curEle.offsetTop; //存在父参照物，并且尚未找到BODY while (par && par.tagName !== "BODY") { //在原有偏移的基础上累加：父参照物的边框、父参照物的偏移 if (!/MSIE 8\.0/.test(navigator.userAgent)) { //IE8中偏移值自已就算了边框了，不须要咱们在加边框的值 navigator.userAgent获取当前浏览器的版本信息 l += par.clientLeft; t += par.clientTop; } l += par.offsetLeft; t += par.offsetTop; //继续获取上级参照物 par = par.offsetParent; } return { top: t, left: l }; } </script> </body> </html>复制代码