offsetLeft到浏览器边用回溯替代的方法

来源：互联网发布：双色球大赢家缩水软件编辑：程序博客网时间：2024/06/16 05:26

高程有错。
html代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7"> -->    <style>        body {            font-size: 12px;        }        #testId {            color: white;            width: 100px;            height: 100px;            background: gray;            border: 10px solid red;            border-width: 10px;            margin: 10px;            padding: 10px;        }        .outer {            /*若注释掉下面这一行，会有不同效果哦*/            position: relative;             border: 10px solid blue;            margin: 50px;            width: 400px;            height: 400px;            background: yellow;            padding: 20px;        }    </style></head><body style="border-width: 0px;">    <div class="outer" style="border-width: 10px;">        <div id="testId" data-sqf="hei" style="border-width: 10px;">            <p></p>            我的宽高是100px,padding是10px,border是10px,margin是10px;        </div>        我的宽高400px,margin 50px,border 10px ,padding 20px    </div><script src="a.js"></script></body></html>

外部a.js的代码:

var oDiv = document.querySelector("#testId");// http://codepen.io/sqf/pen/NGgmzMfunction a(o){    var aa = o.offsetLeft;    var p = o.offsetParent;    while (p !== null){        // console.log(typeof parseInt(p.style.borderWidth))            console.log(aa);        aa = aa + p.offsetLeft + parseInt(p.style.borderWidth);        p = p.offsetParent;    }    return aa;}alert(a(oDiv));alert(oDiv.offsetLeft);

0 0