一、屬性
1.只讀屬性
所謂的只讀屬性指的是DOM節點的固有屬性，該屬性只能通過js去獲取而不能通過js去設置，而且獲取的值是只有數字並不帶單位的（px,em等），如下：
1）clientWidth和clientHeight 該屬性指的是元素的可視部分寬度和高度，即padding+content，如果沒有滾動條，即為元素設定的高度和寬度(padding+content)，如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高
css: <style> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } </style> <body> <div class="one"> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> </div> </body> js: <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; console.log(oDiv.clientWidth+":"+oDiv.clientHeight); } </script>
元素本來設定為寬高都是200，即可視部分寬高都是200，但是由於出現了垂直方向的滾動條，占據了可視部分的寬度，所以clientWidth變成了183，而clientHeight依然是200.
2）offsetWidth和offsetHeight
css和HTML部分同上，js部分如下： <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight); } </script>
可以看到該屬性和clientWidth以及clientHeight相比，多了設定的邊框border的寬度和高度。
這一對屬性是用來讀取元素的border的寬度和高度的
css: <style> body{ border: 2px solid #000000; } .one1{ border: 1px solid red; width: 100px; height: 100px; background: red; } </style> <body> <div class="one"></div> </body> js: <script> var oDiv=document.getElementsByClassName('one')[0]; console.log(oDiv.clientLeft+":"+oDiv.clientTop); </script>
可以看到div的border被設定了1px的寬，這里顯示的就是它的寬度
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>
這里讓div.two相對定位，讓div.one絕對定位，所以div.two是one的offsetParent,同時，又給div.one加了一個margin為20px,所以這里它的offsetTop為40，offsetLeft 本來為0，但是加上margin為20之后就變成了20.
css: <style> .one{ width: 100px; height: 100px; overflow: auto; } </style> HTML: <body> <div class="one"> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> </div> </body> js: <script> var oDiv=document.querySelector('.one'); oDiv.onscroll=function(){ console.log(this.scrollHeight+":"+this.scrollWidth); } </script>
盡管該div的寬高都是100，但是其scrollheight為234顯示的是其中內容的實際高度，scrollWidth為83（由於滾動條占據了寬度）
2.可讀可寫屬性
所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值，還能夠通過js為該屬性賦值。
css和html部分同上，js部分如下： <script> var oDiv=document.querySelector('.one'); oDiv.onscroll=function(){ console.log(this.scrollTop+":"+this.scrollLeft); } </script>
由於拖動了滾動條，scrollTop的屬性值一直在增大，而水平方向沒有滾動條，所以scrollLeft一直為0.
該屬性還可以通過賦值內容自動滾動到某個位置，js如下：
<script> var oDiv=document.querySelector('.one'); oDiv.scrollTop=20; oDiv.onscroll=function(){ console.log(this.scrollTop+":"+this.scrollLeft); } </script>
通過直接設定div的scrollTop,讓它直接顯示在滾動條在20垂直方向上20的位置。
2）obj.style.*屬性
對於一個dom元素，它的style屬性返回的是一個對象，這個對象中的任意一個屬性是可讀寫的。如obj.style.top,obj.style.wdith等，在讀的時候，他們返回的值常常是帶有單位的(如px),同時，對於這種方式，
它只能夠獲取到該元素的行內樣式，而並不能獲取到該元素最終計算好的樣式，這就是在讀取屬性值得時候和以上只讀屬性的區別，要獲取計算好的樣式，請使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)。另一方面，這些屬性能夠被賦值，js運動的原理就是通過不斷修改這些屬性的值而達到其位置改變的，需要注意的是，給這些屬性賦值的時候需要帶單位的要帶上單位，否則不生效。
二、event對象
在js中，對於元素的運動的操作通常都會涉及到event對象，而event對象也存在很多位置屬性，且由於瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。
1）clientX和clientY，這對屬性是當事件發生時，鼠標點擊位置相對於瀏覽器（可視區）的坐標，即瀏覽器左上角坐標的（0,0），該屬性以瀏覽器左上角坐標為原點，計算鼠標點擊位置距離其左上角的位置，
不管瀏覽器窗口大小如何變化，都不會影響點擊位置的坐標。
<script> var oDiv=document.querySelector('.one'); oDiv.onclick=function(ev){ var evt=ev||event; console.log(evt.clientX+":"+evt.clientY); } </script>
2）screenX和screenY是事件發生時鼠標相對於屏幕的坐標，以設備屏幕的左上角為原點，事件發生時鼠標點擊的地方即為該點的screenX和screenY值，
可以看到盡管瀏覽器窗口被縮到很小，但是坐標值卻很大，因為是相對於屏幕坐標而不是瀏覽器的坐標。
3）offsetX和offsetY
這一對屬性是指當事件發生時，鼠標點擊位置相對於該事件源的位置，即點擊該div，以該div左上角為原點來計算鼠標點擊位置的坐標，如下所示：
可以看到，點擊該div的靠近左上角處，它的offsetX和offsetY為1,0，需要注意的是，IE，chrome，opera都支持該屬性，唯獨Firefox不支持該屬性，Firefox中與此屬性相對應的概念是，event.layerX和event.layerY,所以需要兼容瀏覽器時，獲取鼠標點擊位置相對於事件源的坐標的兼容寫法為var disX=event.offsetX||event.layerX.
4)pageX和pageY
顧名思義，該屬性是事件發生時鼠標點擊位置相對於頁面的位置，通常瀏覽器窗口沒有出現滾動條時，該屬性和event.clientX及event.clientY是等價的，但是當瀏覽器出現滾動條的時候，pageX通常會大於clientX，因為頁面還存在被卷起來的部分的寬度和高度，如下所示：
由於瀏覽器出現了垂直和水平的滾動條，所以pageX和pageY大於clientX和clientY。
當瀏覽器的滾動條沒有被拖動或者瀏覽器沒有滾動條的時候，兩者是相等的。
轉載自：http://www.2cto.com/kf/201501/373653.html