在javascript中操作dom節(jié)點(diǎn)讓其運(yùn)動的時候先誉，常常會涉及到各種寬高以及位置坐標(biāo)等概念纸颜，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運(yùn)動原理怀读，同時诉位，由于這些屬性概念較多，加上瀏覽器之間實(shí)現(xiàn)方式不同菜枷，常常會造成概念混淆苍糠，經(jīng)過研究之后，這里來進(jìn)行一個總結(jié)啤誊。
第一部分：DOM對象
- 只讀屬性
所謂的只讀屬性指的是DOM節(jié)點(diǎn)的固有屬性岳瞭，該屬性只能通過js去獲取而不能通過js去設(shè)置，而且獲取的值是只有數(shù)字并不帶單位的（px,em等）蚊锹，如下：
1.clientWidth和clientHeight
該屬性指的是元素的可視部分寬度和高度瞳筏，即padding+content，如果沒有滾動條牡昆，即為元素設(shè)定的高度和寬度姚炕，如果出現(xiàn)滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高钻心。
CSS：
<style>
.one{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000000;
overflow: auto;
}
</style>
HTML：
<body>
<div class="one">
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
javascript高級應(yīng)用<br>
</div>
</body>
JS：
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
console.log(oDiv.clientWidth+":"+oDiv.clientHeight);
}
</script>
結(jié)果：
元素本來設(shè)定為寬高都是200凄硼，即可視部分寬高都是200铅协，但是由于出現(xiàn)了垂直方向的滾動條捷沸，占據(jù)了可視部分的寬度，所以clientWidth變成了183狐史，而clientHeight依然是200痒给。
2.offsetWidth和offsetHeight
這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無關(guān)骏全，只和本來設(shè)定的border以及width和height有關(guān)苍柏。
css和HTML部分同上，js部分如下：
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight);
}
</script>
最終結(jié)果：
可以看到該屬性和clientWidth以及clientHeight相比姜贡，多了設(shè)定的邊框border的寬度和高度试吁。
3.clientTop和clientLeft
這一對屬性是用來讀取元素的border的寬度和高度的。
CSS:
<style>
body{
border: 2px solid #000000;
}
.one{
border: 1px solid red;
width: 100px;
height: 100px;
background: red;
}
</style>
HTML：
<body>
<div class="one">
</div>
</body>
JS：
<script>
var oDiv=document.getElementsByClassName('one')[0];
console.log(oDiv.clientLeft+":"+oDiv.clientTop);
</script>
可以看到div的border被設(shè)定了1px的寬楼咳，這里顯示的就是它的寬度熄捍。
4.offsetLeft和offsetTop
說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當(dāng)前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以）母怜，該父級元素就是當(dāng)前元素的offsetParent余耽，如果從該元素向上尋找，找不到這樣一個父級元素苹熏，那么當(dāng)前元素的offsetParent就是body元素碟贾。而offsetLeft和offsetTop指的是當(dāng)前元素，相對于其offsetParent左邊距離和上邊距離轨域，即當(dāng)前元素的border到包含它的offsetParent的border的距離如下所示：
CSS：
<style>
.two{
position: relative;
width: 200px;
height: 200px;
border: 1px solid green;
}
.one {
width: 100px;
height: 100px;
background: red;
margin: 20px;
border: 1px solid #000000;
position: absolute;
top:20px;
}
</style>
HTML：
<body>
<div class="two">
<div class="one">
</div>
</div>
</body>
JS：
<script>
var oDiv=document.querySelector('.one');
console.log(oDiv.offsetTop+":"+oDiv.offsetLeft);
</script>
最終結(jié)果：
這里讓div.two相對定位袱耽，讓div.one絕對定位，所以div.two是one的offsetParent,同時干发，又給div.one加了一個margin為20px,所以這里它的offsetTop為40朱巨，offsetLeft 本來為0，但是加上margin為20之后就變成了20.
5.scrollHeight和scrollWidth
顧名思義铐然，這兩個屬性指的是當(dāng)元素內(nèi)部的內(nèi)容超出其寬度和高度的時候蔬崩，元素內(nèi)部內(nèi)容的實(shí)際寬度和高度，需要注意的是搀暑，當(dāng)元素其中內(nèi)容沒有超過其高度或者寬度的時候沥阳，該屬性是取不到的。
CSS：
<style>
.one{
width: 100px;
height: 100px;
overflow: auto;
}
</style>
HTML：
<body>
<div class="one">
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
我是內(nèi)容<br>
</div>
</body>
JS：
<script>
var oDiv=document.querySelector('.one');
oDiv.onscroll=function(){
console.log(this.scrollHeight+":"+this.scrollWidth);
}
</script>
最終結(jié)果：
盡管該div的寬高都是100自点，但是其scrollheight為234顯示的是其中內(nèi)容的實(shí)際高度桐罕，scrollWidth為83（由于滾動條占據(jù)了寬度）
-可讀可寫屬性
所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值，還能夠通過js為該屬性賦值。
1.scrollTop和scrollLeft
這對屬性是可讀寫的功炮，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時候溅潜，元素被卷起的高度和寬度。
css和html部分同上薪伏，js部分如下：
<script>
var oDiv=document.querySelector('.one');
oDiv.onscroll=function(){
console.log(this.scrollTop+":"+this.scrollLeft);
}
</script>
最終結(jié)果：
由于拖動了滾動條滚澜，scrollTop的屬性值一直在增大，而水平方向沒有滾動條嫁怀，所以scrollLeft一直為0.
該屬性還可以通過賦值內(nèi)容自動滾動到某個位置设捐，js如下：
<script>
var oDiv=document.querySelector('.one');
oDiv.scrollTop=20;
oDiv.onscroll=function(){
console.log(this.scrollTop+":"+this.scrollLeft);
}
</script>
結(jié)果如下：
通過直接設(shè)定div的scrollTop,讓它直接顯示在滾動條在20垂直方向上20的位置。
2.obj.style.*屬性
對于一個dom元素塘淑，它的style屬性返回的是一個對象萝招，這個對象中的任意一個屬性是可讀寫的。如obj.style.top,obj.style.wdith等存捺，在讀的時候槐沼，他們返回的值常常是帶有單位的(如px),同時，對于這種方式捌治，
它只能夠獲取到該元素的行內(nèi)樣式岗钩，而并不能獲取到該元素最終計算好的樣式，這就是在讀取屬性值得時候和以上只讀屬性的區(qū)別具滴，要獲取計算好的樣式凹嘲，請使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)。另一方面构韵，這些屬性能夠被賦值周蹭，js運(yùn)動的原理就是通過不斷修改這些屬性的值而達(dá)到其位置改變的，需要注意的是疲恢，給這些屬性賦值的時候需要帶單位的要帶上單位凶朗，否則不生效。
第二部分 Event對象
在js中显拳，對于元素的運(yùn)動的操作通常都會涉及到event對象棚愤，而event對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導(dǎo)致這些屬性間相互混淆杂数，這里一一講解宛畦。
1.clientX和clientY，這對屬性是當(dāng)事件發(fā)生時揍移，鼠標(biāo)點(diǎn)擊位置相對于瀏覽器（可視區(qū)）的坐標(biāo)次和，即瀏覽器左上角坐標(biāo)的（0,0），該屬性以瀏覽器左上角坐標(biāo)為原點(diǎn)那伐，計算鼠標(biāo)點(diǎn)擊位置距離其左上角的位置踏施，不管瀏覽器窗口大小如何變化石蔗，都不會影響點(diǎn)擊位置的坐標(biāo)。
JS：
<script>
var oDiv=document.querySelector('.one');
oDiv.onclick=function(ev){
var evt=ev||event;
console.log(evt.clientX+":"+evt.clientY);
}
</script>
結(jié)果：
2.screenX和screenY是事件發(fā)生時鼠標(biāo)相對于屏幕的坐標(biāo)畅形，以設(shè)備屏幕的左上角為原點(diǎn)养距，事件發(fā)生時鼠標(biāo)點(diǎn)擊的地方即為該點(diǎn)的screenX和screenY值，如下所示：
可以看到盡管瀏覽器窗口被縮到很小日熬，但是坐標(biāo)值卻很大棍厌，因為是相對于屏幕坐標(biāo)而不是瀏覽器的坐標(biāo)。
3.offsetX和offsetY
這一對屬性是指當(dāng)事件發(fā)生時碍遍，鼠標(biāo)點(diǎn)擊位置相對于該事件源的位置定铜，即點(diǎn)擊該div阳液，以該div左上角為原點(diǎn)來計算鼠標(biāo)點(diǎn)擊位置的坐標(biāo)怕敬，如下所示：
可以看到，點(diǎn)擊該div的靠近左上角處帘皿，它的offsetX和offsetY為1,0东跪，需要注意的是，IE鹰溜，chrome虽填，opera都支持該屬性，唯獨(dú)Firefox不支持該屬性曹动，F(xiàn)irefox中與此屬性相對應(yīng)的概念是斋日，event.layerX和event.layerY,所以需要兼容瀏覽器時，獲取鼠標(biāo)點(diǎn)擊位置相對于事件源的坐標(biāo)的兼容寫法為var disX=event.offsetX||event.layerX.
4.pageX和pageY
顧名思義墓陈，該屬性是事件發(fā)生時鼠標(biāo)點(diǎn)擊位置相對于頁面的位置恶守，通常瀏覽器窗口沒有出現(xiàn)滾動條時，該屬性和event.clientX及event.clientY是等價的贡必，但是當(dāng)瀏覽器出現(xiàn)滾動條的時候兔港，pageX通常會大于clientX，因為頁面還存在被卷起來的部分的寬度和高度仔拟，如下所示：
由于瀏覽器出現(xiàn)了垂直和水平的滾動條衫樊，所以pageX和pageY大于clientX和clientY。
當(dāng)瀏覽器的滾動條沒有被拖動或者瀏覽器沒有滾動條的時候利花，兩者是相等的科侈。
補(bǔ)充:e.clientX 相對于文檔的水平坐標(biāo)。(也就是鼠標(biāo)點(diǎn)擊的位置到瀏覽器左邊的位置)
e.clientY相對于文檔的水平坐標(biāo)（也就是鼠標(biāo)點(diǎn)擊的位置到瀏覽器上邊的位置）
e.offsetLeft:當(dāng)前對象到上級層左邊的距離炒事。
e.offsetTop:當(dāng)前對象到上級層上邊的距離臀栈。
e.offsetWidth:當(dāng)前對象的寬度。
e.offsetHeight:當(dāng)前對象的高度羡洛。
