关于offsetLeft和offsetTop

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>
        <div class="cc">
            <div class="fc" >

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

clipboard.png

阅读 5.8k
2 个回答

offsetLeftoffsetTop 返回的是相对于 offsetParent 元素的距离,而 offsetParent 指的是一个元素最近的父级定位元素,如果没有定位元素就是文档根节点。

你现在输出的值加上 body 本身有 8px 的 margin,其实是没错的。
你可以加个 body { margin:0 } 或者给父级元素加上定位,输出就是你期望的数了。

默认有8px的margin。使用*{margin:0;}清除默认样式。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题