在javascript中操作dom節(jié)點(diǎn)讓其運(yùn)動(dòng)的時(shí)候赚爵，常常會(huì)涉及到各種寬高以及位置坐標(biāo)等概念蜀撑，如果不能很好地理解這些屬性所代表的意義看铆，就不能理解js的運(yùn)動(dòng)原理徽鼎，同時(shí)，由于這些屬性概念較多弹惦，加上瀏覽器之間
實(shí)現(xiàn)方式不同否淤，常常會(huì)造成概念混淆，經(jīng)過研究之后棠隐，這里來進(jìn)行一個(gè)總結(jié)石抡。
先附圖做理解：
第一部分：DOM對(duì)象
1.1只讀屬性
所謂的只讀屬性指的是DOM節(jié)點(diǎn)的固有屬性，該屬性只能通過js去獲取而不能通過js去設(shè)置助泽，而且獲取的值是只有數(shù)字并不帶單位的（px,em等）啰扛，如下：
1）clientWidth和clientHeight
該屬性指的是元素的可視部分寬度和高度嚎京，即padding+content，如果沒有滾動(dòng)條侠讯，即為元素設(shè)定的高度和寬度挖藏，如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高厢漩，那么該屬性就是其本來寬高減去滾動(dòng)條的寬高
css:
<style>
.one{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000000;
overflow: auto;
}
</style>
HTML
<body>
<div class="one">
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(yīng)用<br>
javascript高級(jí)應(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)了垂直方向的滾動(dòng)條溜嗜，占據(jù)了可視部分的寬度宵膨，所以clientWidth變成了183，而clientHeight依然是200.
2）offsetWidth和offsetHeight
這一對(duì)屬性指的是元素的border+padding+content的寬度和高度炸宵，該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(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
這一對(duì)屬性是用來讀取元素的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>
最終結(jié)果：
可以看到div的border被設(shè)定了1px的寬裹匙，這里顯示的就是它的寬度
4）offsetLeft和offsetTop
說到這對(duì)屬性就需要說下offsetParent,所謂offsetParent指的是當(dāng)前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級(jí)元素（不僅僅指的是直接父級(jí)元素瑞凑，只要是它的父元素都可以），該父級(jí)元素就是當(dāng)前元素的offsetParent概页，如果從該元素向上尋找籽御，找不到這樣一個(gè)父級(jí)元素，那么當(dāng)前元素的offsetParent就是body元素惰匙。而offsetLeft和offsetTop指的是當(dāng)前元素技掏，相對(duì)于其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相對(duì)定位项鬼，讓div.one絕對(duì)定位哑梳，所以div.two是one的offsetParent,同時(shí)，又給div.one加了一個(gè)margin為20px,所以這里它的offsetTop為40绘盟，offsetLeft 本來為0鸠真，但是加上margin為20之后就變成了20.
5）scrollHeight和scrollWidth
顧名思義，這兩個(gè)屬性指的是當(dāng)元素內(nèi)部的內(nèi)容超出其寬度和高度的時(shí)候奥此，元素內(nèi)部?jī)?nèi)容的實(shí)際寬度和高度，需要注意的是雁比，當(dāng)元素其中內(nèi)容沒有超過其高度或者寬度的時(shí)候稚虎，該屬性是取不到的。
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（由于滾動(dòng)條占據(jù)了寬度）
6）getClientRects和getBoundingClientRect
{
top : (number)
bottom : (number)
left : (number)
right : (number)
width : (number)
height : (number)
}
getClientRects返回的其實(shí)是個(gè)數(shù)組序攘，數(shù)組中有很多個(gè)類似getBoundingClientRect返回的對(duì)象。getBoundingClientRect返回的永遠(yuǎn)是最外框框的那個(gè)矩形區(qū)域相關(guān)的坐標(biāo)偏移對(duì)象寻拂；而getClientRects是多行文字區(qū)域的坐標(biāo)偏移集合程奠，在非IE瀏覽器下，只對(duì)inline的標(biāo)簽有反應(yīng)祭钉。
一般getBoundingClientRect方法用的多一點(diǎn)瞄沙。我們可以很容易獲取某個(gè)元素的偏移值。甚至高寬都能很輕松的計(jì)算出來慌核。所以距境，下載你想用js獲取元素的高寬尺寸，就可以試試getBoundingClientRect方法了垮卓。
對(duì)getClientRects和getBoundingClientRect可以得到一個(gè)更好的說明.
getClientRects 返回一個(gè)TextRectangle集合垫桂，就是TextRectangleList對(duì)象。
getBoundingClientRect 返回 一個(gè)TextRectangle對(duì)象粟按。
那么這個(gè)TextRectangle對(duì)象有什么用呢诬滩，用來開判斷文本是否換行！或者說用來獲取矩形區(qū)域相關(guān)的坐標(biāo)偏移對(duì)象灭将！
1.2可讀可寫屬性
所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值疼鸟，還能夠通過js為該屬性賦值。
1）scrollTop和scrollLeft
這對(duì)屬性是可讀寫的宗侦，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候愚臀，元素被卷起的高度和寬度。
css和html部分同上矾利，js部分如下：
<script>
var oDiv=document.querySelector('.one');
oDiv.onscroll=function(){
console.log(this.scrollTop+":"+this.scrollLeft);
}
</script>
最終結(jié)果：
由于拖動(dòng)了滾動(dòng)條姑裂，scrollTop的屬性值一直在增大，而水平方向沒有滾動(dòng)條男旗，所以scrollLeft一直為0.
該屬性還可以通過賦值內(nèi)容自動(dòng)滾動(dòng)到某個(gè)位置舶斧，js如下：
<script>
var oDiv=document.querySelector('.one');
oDiv.scrollTop=20;
oDiv.onscroll=function(){
console.log(this.scrollTop+":"+this.scrollLeft);
}
</script>
結(jié)果如下：
通過直接設(shè)定div的scrollTop,讓它直接顯示在滾動(dòng)條在20垂直方向上20的位置。
2）obj.style.屬性
對(duì)于一個(gè)dom元素察皇，它的style屬性返回的是一個(gè)對(duì)象茴厉，這個(gè)對(duì)象中的任意一個(gè)屬性是可讀寫的。如obj.style.top,obj.style.wdith等什荣，在讀的時(shí)候矾缓，他們返回的值常常是帶有單位的(如px),同時(shí)，對(duì)于這種方式稻爬，
它只能夠獲取到該元素的行內(nèi)樣式嗜闻，而并不能獲取到該元素最終計(jì)算好的樣式，這就是在讀取屬性值得時(shí)候和以上只讀屬性的區(qū)別桅锄，要獲取計(jì)算好的樣式琉雳，請(qǐng)使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)样眠。另一方面，這些屬性能夠被賦值翠肘，js運(yùn)動(dòng)的原理就是通過不斷修改這些屬性的值而達(dá)到其位置改變的檐束，需要注意的是，給這些屬性賦值的時(shí)候需要帶單位的要帶上單位束倍，否則不生效被丧。
第二部分 Event對(duì)象
在js中，對(duì)于元素的運(yùn)動(dòng)的操作通常都會(huì)涉及到event對(duì)象肌幽，而event對(duì)象也存在很多位置屬性晚碾，且由于瀏覽器兼容性問題會(huì)導(dǎo)致這些屬性間相互混淆，這里一一講解喂急。
1）clientX和clientY肚豺，這對(duì)屬性是當(dāng)事件發(fā)生時(shí)实辑，鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器（可視區(qū)）的坐標(biāo)，即瀏覽器左上角坐標(biāo)的（0,0），該屬性以瀏覽器左上角坐標(biāo)為原點(diǎn)膨报，計(jì)算鼠標(biāo)點(diǎn)擊位置距離其左上角的位置糙置，
不管瀏覽器窗口大小如何變化撩匕，都不會(huì)影響點(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ā)生時(shí)鼠標(biāo)相對(duì)于屏幕的坐標(biāo)，以設(shè)備屏幕的左上角為原點(diǎn)苗膝，事件發(fā)生時(shí)鼠標(biāo)點(diǎn)擊的地方即為該點(diǎn)的screenX和screenY值殃恒，如下所示：
可以看到盡管瀏覽器窗口被縮到很小，但是坐標(biāo)值卻很大辱揭，因?yàn)槭窍鄬?duì)于屏幕坐標(biāo)而不是瀏覽器的坐標(biāo)离唐。
3）offsetX和offsetY
這一對(duì)屬性是指當(dāng)事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊位置相對(duì)于該事件源的位置问窃，即點(diǎn)擊該div亥鬓，以該div左上角為原點(diǎn)來計(jì)算鼠標(biāo)點(diǎn)擊位置的坐標(biāo)，如下所示：
可以看到域庇，點(diǎn)擊該div的靠近左上角處嵌戈，它的offsetX和offsetY為1,0，需要注意的是听皿，IE熟呛，chrome，opera都支持該屬性尉姨，唯獨(dú)Firefox不支持該屬性庵朝，F(xiàn)irefox中與此屬性相對(duì)應(yīng)的概念是，event.layerX和event.layerY,所以需要兼容瀏覽器時(shí)，獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于事件源的坐標(biāo)的兼容寫法為var disX=event.offsetX||event.layerX.
4)pageX和pageY
顧名思義偿短，該屬性是事件發(fā)生時(shí)鼠標(biāo)點(diǎn)擊位置相對(duì)于頁(yè)面的位置，通常瀏覽器窗口沒有出現(xiàn)滾動(dòng)條時(shí)馋没，該屬性和event.clientX及event.clientY是等價(jià)的昔逗，但是當(dāng)瀏覽器出現(xiàn)滾動(dòng)條的時(shí)候，pageX通常會(huì)大于clientX篷朵，因?yàn)轫?yè)面還存在被卷起來的部分的寬度和高度勾怒，如下所示：
由于瀏覽器出現(xiàn)了垂直和水平的滾動(dòng)條，所以pageX和pageY大于clientX和clientY声旺。
當(dāng)瀏覽器的滾動(dòng)條沒有被拖動(dòng)或者瀏覽器沒有滾動(dòng)條的時(shí)候笔链，兩者是相等的。
最后附上js/jq獲取距離的對(duì)比：
1.Js獲取瀏覽器高度和寬度
document.documentElement.clientWidth ==> 瀏覽器可見區(qū)域?qū)挾?br>
document.documentElement.clientHeight ==> 瀏覽器可見區(qū)域高度
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
Jq獲取瀏覽器高度和寬度
$(window).width() ==> 瀏覽器可見區(qū)域?qū)挾?br>
$(window).height() ==> 瀏覽器可見區(qū)域高度
$(document).height() ==> 頁(yè)面文檔的高度
$(document.body).height() ==> BODY對(duì)象高度
2.Js獲取對(duì)象的高度和寬度
obj.width = obj.style.width
obj.clientWidth = width + padding ==> 獲得包括內(nèi)邊界（padding）的元素寬度
obj.offsetHeight = height + padding + border ==> 獲得包括內(nèi)邊界(padding)和邊框(border)的元素高度
Jq獲取對(duì)象的高度和寬度
obj.innerWidth() ==> 獲得包括內(nèi)邊界（padding）的元素寬度腮猖，
obj.outerWidth() ==> 獲得包括內(nèi)邊界(padding)和邊框(border)的元素寬度
obj.outerWidth(true) ==> 獲得包括外邊界(margin)的元素寬度
w同一個(gè)元素應(yīng)該是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);
3.Js 獲取對(duì)象的相對(duì)高度和寬度
obj.offsetLeft ==> 元素相對(duì)于父元素的left
obj.offsettop ==> 元素相對(duì)于父元素的top
obj.scrollWidth ==> 獲取對(duì)象的滾動(dòng)寬度
obj.scrollHeight ==> 獲取對(duì)象的滾動(dòng)高度
obj.scrollLeft ==> 設(shè)置或獲取位于對(duì)象左端滾動(dòng)的距離
obj.scrollTop ==> 設(shè)置或獲取位于對(duì)象頂端滾動(dòng)的距離
Jq 獲取對(duì)象的相對(duì)高度和寬度
obj.offset().left ==> 元素相對(duì)于文檔的left
obj.offset().top ==> 元素相對(duì)于文檔的top
obj.scrollLeft() ==> 設(shè)置或返回對(duì)象相對(duì)滾動(dòng)條左側(cè)的偏移鉴扫。
obj.scrollTop() ==> 設(shè)置或返回對(duì)象相對(duì)滾動(dòng)條頂部的偏移。
