offset

1.offsetWidth:獲取當(dāng)前對(duì)象的寬度(width+padding+border);
2.offsetHeight:獲取當(dāng)前對(duì)象的高度(height+padding+border);
3.offsetLeft:獲取當(dāng)前對(duì)象到其上層左邊的距離;
4.offsetTop:獲取當(dāng)前對(duì)象到其上層頂部的距離;

  注意: offset是可讀屬性,用來(lái)獲取對(duì)象的可見(jiàn)寬高及位置.
  offset與style屬性的區(qū)別是:
    1.style屬性返回值帶有單位
    2.style屬性可以設(shè)置百分比
    3.style屬性沒(méi)有設(shè)置,返回空字符串,offset可以獲取

實(shí)例

碰撞檢測(cè)

css樣式

.wrap{
    width: 500px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
#div1{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 25px;
}

js樣式

var wrapDiv = document.querySelector(".wrap");
var div1 = document.getElementById("div1");
var x = wrapDiv.clientWidth- div1.offsetWidth;
var y= wrapDiv.clientHeight - div1.offsetHeight;
var speedx = 1;
var speedy = 1;
timer = setInterval(function(){
    if(div1.offsetLeft >=x){
    speedx *=-1;        
    }
    else if(div1.offsetLeft<0){
    speedx *=-1; 
    }
    div1.style.left = div1.offsetLeft + speedx + "px";
    div1.style.top = div1.offsetTop + speedy + "px";
},10);