offset系列

编辑本博客

元素占位高，和宽

  • offsetTop：没有设置定位的话，到浏览器顶部的距离。如果设置定位后，即以父盒子为基准，即top值
  • offsetLeft：没设置定位，即到浏览器左边的位置。如果设置定位，则以父盒子为基准，即left值
  • offsetWidth：内容宽度+padding+border
  • offsetHeight
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset系列</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 200px; height: 200px; border: 1px solid seagreen; padding: 10px;margin: 10px;"
</body>
<script type="text/javascript">
    window.onload=function (ev) {
        var box=document.getElementById('box')
        console.log(box.offsetTop);
        console.log(box.offsetLeft);
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);
    }
</script>
</html>
View Code
posted @ 2018-06-17 10:37  丫丫625202  阅读(162)  评论(0)  编辑  收藏  举报