系列属性(offset)

一、offset系列属性

   <div id="dv"></div>
    <!-- 已在style标签里设置div宽高各100px -->
    <script>
        //在style标签里面的样式属性无法获取,但是在style属性中设置的样式可以获取
        console.log(document.getElementById("dv").style.width);//为空---无法获取

        //所以引出了offset系列,总共有四个属性如下:
        //1.可以通过offsetWidth获取元素的宽
        console.log(document.getElementById("dv").offsetWidth);//100

        //2.可以通过offsetHeight获取元素的高
        console.log(document.getElementById("dv").offsetHeight);//100

        //3.可以通过offsetLeft获取元素距离左边的值
        //注意:
        //没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
        //脱离文档流,值=自己的left+自己的margin
        console.log(document.getElementById("dv").offsetLeft);//8---没有清除边距

        //4.可以通过offsetLeft获取元素距离上边的值
        console.log(document.getElementById("dv").offsetTop);//8---没有清除边距
        //注意:
        //没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
        //脱离文档流,值=自己的left+自己的margin
    </script>