client与offset

<style>

  body{border:10px solid red}

</style>

console.log("document.body.offsetWidth:"+document.body.offsetWidth);
console.log("document.body.clientWidth:"+document.body.clientWidth);
console.log("document.body.scrollWidth:"+document.body.scrollWidth);

console.log("document.body.offsetHeight:"+document.body.offsetHeight);
console.log("document.body.clientHeight:"+document.body.clientHeight);
console.log("document.body.scrollHeight:"+document.body.scrollHeight);

console.log("document.body.offsetTop:"+document.body.offsetTop);
console.log("document.body.clientTop:"+document.body.clientTop);
console.log("document.body.scrollTop:"+document.body.scrollTop);

console.log("document.body.offsetLeft:"+document.body.offsetLeft);
console.log("document.body.clientLeft:"+document.body.clientLeft);
console.log("document.body.scrollLeft:"+document.body.scrollLeft);

 

运行结果：

document.body.offsetWidth:1903
document.body.clientWidth:1883
document.body.scrollWidth:1903

document.body.offsetHeight:2612
document.body.clientHeight:2592
document.body.scrollHeight:2612

document.body.offsetTop:0
document.body.clientTop:10
document.body.scrollTop:0

document.body.offsetLeft:0
document.body.clientLeft:10
document.body.scrollLeft:0

由以上结果可以看出，scroll=offset = client+border.