offsetWidth offsetHeight offsetLeft offsetTop

offsetWidth 表示一个元素的宽度，基于盒模型要加上border 和 padding，如下：

offsetWidth == width+border + padding 

offsetLeft 表示一个元素的左边距，这个距离包括父元素的左边距加上自己距离父元素的左边距，如下：

offsetLeft == (left + margin-left)(parent)   +   （left + margin-left）(self)

#div1 {
    width:400px;
    height:200px;
    margin-left:100px;
    background:green;
}

#div2 {
    width:100px;
    height:100px;
    left: 30px;
    top: 60px;
    background:red;
    position: relative;
}

#div3{
    width:50px;
    height:50px;
    background:blue;
    position: relative;
}

<div id = "div1">
    <div id = "div2"></div>
    <div id = "div3"></div>
</div>

function changeL() {
    var div2 = document.getElementById("div2").offsetLeft;
    console.log("div2: " + div2);
    div2 += "px";
    document.getElementById("div3").style.marginLeft = div2;
    console.log("div3: " + document.getElementById("div3").offsetLeft);
}

最近就用到这写属性来解决了项目中的问题。

1. 之前页面中的小方块的宽度是不固定的， 所以每次可以用offsetWidth 来取宽度

2. 之前页面中的小方块的位置是不固定的，所以每次可用offsetLeft offsetTop 来定位