滾動(dòng)條是內(nèi)嵌的
1.scrollWidth/scrollHeight
有滾動(dòng)條：scrollWidth，scrollHeight=里內(nèi)容+內(nèi)容邊框2+內(nèi)邊距（有滾動(dòng)條 padding-bottom消失了）
兼容性可能有些瀏覽器沒有考慮邊框大小
沒有滾動(dòng)條：scrollWidth，scrollHeight=里內(nèi)容+內(nèi)邊距2
scrollLeft //每個(gè)瀏覽器計(jì)算方法不一樣 滾動(dòng)的長度
scrollTop
2.offsetWidth/offsetHeight
有滾動(dòng)條：offsetWidth，offsetHeight=外內(nèi)容+外內(nèi)容邊框2+外內(nèi)邊距2
沒有滾動(dòng)條：offsetWidth,offsetHeight=外內(nèi)容+外內(nèi)容邊框2+外內(nèi)邊距2
有就是有沒有滾動(dòng)條都一樣都是自身寬高
offsetLeft 對(duì)象的左邊框 //left+margin
offsetTop 對(duì)象的上邊框 //相對(duì)于父元素的偏移量，margin left top都能影響到 系統(tǒng)默認(rèn)的margin，padding也能影響到
3.clientWidth/clientHeight
有滾動(dòng)條：clientWidth，clientHeight=內(nèi)容+內(nèi)邊距2（有文字就知道兩個(gè)內(nèi)邊距都有）-scrollbarWidth/scrollbarHeight(默認(rèn)17)
沒有滾動(dòng)條：clientWidth,clientHeight=外內(nèi)容（height/width）+外內(nèi)邊距2（padding）
有就是有沒有滾動(dòng)條都一樣都是自身寬高
clientLeft 對(duì)象的左邊框
clientTop 對(duì)象的上邊框
obj.style.width/obj.style.height/obj.style.top/obj.style.left
必須是有內(nèi)聯(lián)樣式，沒有值都沒有
<div id='external' style="height:500px;width:600px;top:700px;left:800px">
<div id='inner'>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0; //影響offsetTop、offsetHeight
}
#external{
width: 300px;
height: 300px;
border: 5px solid blue;
background: pink;
position: relative;
left: 10px;
top: 20px;
padding: 40px;
margin: 30px;
overflow: auto;
}
#inner{
width: 500px;
height: 500px;
border: 4px solid red;
background: yellow;
}
</style>
</head>
<body>
<div id='external'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo at eos sapiente optio eligendi perferendis. Provident nam quo quas impedit iste, corrupti dolorem incidunt nisi. Delectus dolore voluptates, mollitia quibusdam?
<div id='inner'>
</div>
</div>
<button onclick="scrollbar()">scroll</button>
<script>
window.onload=function(){
var external=document.getElementById("external");
console.log("寬"+external.scrollWidth+"高"+external.scrollHeight);
console.log("寬"+external.offsetWidth+"高"+external.offsetHeight);
console.log("寬"+external.scrollLeft+"高"+external.scrollTop);
console.log("寬"+external.clientWidth+"高"+external.clientHeight);
console.log("寬"+external.clientLeft+"高"+external.clientTop);
}
function scrollbar(){
var external=document.getElementById("external");
console.log("寬"+external.scrollWidth+"高"+external.scrollHeight);
console.log("寬"+external.scrollLeft+"高"+external.scrollTop);
}
</script>
</body>
</html>
