css - 关于offsetLeft和offsetTop
大家讲道理
大家讲道理 2017-04-17 15:00:35
0
2
1030

offsetLeft不是当前元素的左外边框到包含元素的左内边框之间的像素距离吗?
为什么多出了8px

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test2</title>
        <style media="screen">
            .cc{
                padding: 50px 30px;
            }
            .fc{
                background-color: blue;
                width:300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <p class="cc">
            <p class="fc" >

            </p>
        </p>
    </body>
    <script type="text/javascript">
        var fc = document.querySelector('.fc');
        console.log(fc.offsetLeft+':'+fc.offsetTop);
    </script>
</html>

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全員に返信(2)
巴扎黑

offsetLeftoffsetTop は、offsetParent 要素に対する相対的な距離を返します。一方、offsetParent は、要素の最も近い親に配置された要素を参照します。配置された要素がない場合、それはドキュメント ルート ノードになります。

現在出力している値と本文自体には 8px のマージンがあり、これは実際には正しいです。
body { margin:0 } を追加するか、親要素に位置を追加すると、出力は期待した数値になります。

いいねを押す +0
迷茫

デフォルトでは 8px の余白があります。 *{margin:0;} を使用してデフォルトのスタイルをクリアします。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート