JavaScript 使用offsetLeft 和offsetTop

■知識(shí)點(diǎn)

    offsetLeft和offsetTop屬性返回當(dāng)前元素的偏移位置。IE怪異模式以父元素為參照進(jìn)行偏移的位置，DOM標(biāo)準(zhǔn)模式以最近定位元素為參照進(jìn)行偏移的位置。

■實(shí)例設(shè)計(jì)

    下面的示例是一個(gè)三層嵌套的結(jié)構(gòu)，其中最外層div元素被定義為相對(duì)定位顯示，然后在腳本中使用"console.log(box.offsetLeft);"語(yǔ)句獲取最內(nèi)層div元素的偏移位置，則IE怪異模式返回值為50px，而DOM標(biāo)準(zhǔn)模式返回101px。

<style type="text/css">

div {width:200px; height:lOOpx; border:solid lpx red; padding:50px;}

#wrap { position:relative; border-width:20px; }

</style>

<div id="wrap">

    <div id="sub">

        <div id="box"x/div>

    </div>

</div>