判斷盒子的絕對偏移值

時間 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>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。