DOM初探（17）——查看元素的尺寸与位置

四：DOM基本操作：

查看元素的尺寸：

dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin)

查看元素的位置：

dom.offsetLeft,dom.offsetTop

对于无定位父级的元素，返回相对文档的坐标；

对于有定位父级的元素，返回相对最近的有定位的父级的坐标。

dom.offsetParent

返回最近的有定位的父级，如无，返回body,body.offsetParent返回null

查看元素的尺寸：

dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin)

现在我给div加个padding：100px；

说明这个div.offsetWidth返回的是元素看起来的宽高吧！！你在看，这个div.offsetWidth和div.getBoundingClientRect()返回的结果是一样的吧，所以这个div.offsetWidth就把div.getBoundingClientRect()给取代了。

那，我就是想求div内容区的宽高是多少，怎么办？

查看元素的位置：

dom.offsetLeft,dom.offsetTop

但是这两个方法，没有咱们想想的这么理想。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
        <style>
            .div1{
                width: 300px;
                height: 300px;
                border: 2px solid black;
                position: relative;
                top: 100px;
                left: 100px;
            }
            .div2{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 100px;
                left: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

为什么里面的div会在外面div的中间？

基于有定位的父级定位吧！！

那如果里面的那个div不是通过改变left和top实现的，是通过改变margin实现的呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
        <style>
            .div1{
                width: 300px;
                height: 300px;
                border: 2px solid black;
                position: relative;
                top: 100px;
                left: 100px;
            }
            .div2{
                width: 100px;
                height: 100px;
                position: absolute;
                margin-top: 100px;
                margin-left: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByClassName("div2")[0];
        </script>
    </body>
</html>

红色的方块还是在原来的位置，并且这个还是100px，

说明div.offsetLeft的含义：忽略自身是否为定位元素，他求的只是这个元素距离他有定位的父级的距离(不管这个距离是怎样生成的)。

下面试试，把他外面的父级也变成不定位的，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
        <style>
            .div1{
                width: 300px;
                height: 300px;
                border: 2px solid black;
                position: static;
                /* static是position的默认是，静态的意思 */
                margin-top: 100px;
                margin-left: 100px;
            }
            .div2{
                width: 100px;
                height: 100px;
                position: absolute;
                margin-top: 100px;
                margin-left: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByClassName("div2")[0];
        </script>
    </body>
</html>

这次你猜猜div.offsetLeft是什么了？

他的父级没有定位，返回的是文档的坐标吧！

那200px知道是怎么回事，还有一个边框2px，200+2=202，为什么是210px呢？那8px是哪里来的？

咱们是不是说过body里面有个margin 8px！！！

为什么div.offsetTop是202px呢？

是不是纵向的margin塌陷了！

练习41：求相对文档的坐标getElementPosition

DOM初探（17）——查看元素的尺寸与位置

猜你喜欢