# javascript快速入門19--定位 ## 元素尺寸 獲取元素尺寸可以使用下面幾種方式 * 元素的style屬性width，height，但這些屬性往往返回空值，因為它們只能返回使用行內style屬性定義在元素上的樣式 * 元素的currentStyle屬性width，height（IE），getComputedStyle(obj,null)返回對象的width，height，這樣可以獲取元素的實際CSS定義的寬度和高度，但當元素沒有使用CSS定義外觀時，雖然元素仍然有大小（只要其中有字符或其它元素），這些屬性的返回值是不確定的，如IE返回auto,而火狐則返回一個看似理想的值。 * 對象的clientWidth和clientHeight屬性給出元素的可視部分的寬度和高度,當有滾動條時，只返回可見區域大小,對于塊級元素,將返回元素的所設置的寬度和高度加上填充(padding)，這一點幾乎所有瀏覽器都達成一致.但當塊級元素并沒有設置寬和高以及填充時,就出現不同了,谷歌瀏覽器和火狐瀏覽器的報告一致,IE報告都為0,而Opera則有所偏差.再將這兩個屬性應用到行內元素上,IE和火狐都報告為0,谷歌報告了一個看似理想的數字,而Opera竟會一個為正另一個負! * 對象的offsetWidth和offsetHeight屬性用來取得對象在頁面中的實際所占區域大小(所設置的寬高加邊框加填充，當有滾動條時還會算上滾動條),似乎這個屬性對于設置了寬和高的塊級元素幾乎沒有什么瀏覽器兼容問題,但不得不說的是火狐的一個BUG.火狐瀏覽器有個可將頁面放大縮小的功能,當將頁面縮小后,對象的offsetWidth和offsetHeight屬性會發生細微的變化-變小幾像素!盡管這對JS編程來講幾乎沒影響,但似乎這個BUG也太明顯了.這兩個屬性變非總是那么讓人信任,當對象并沒設置寬高或它是一個行內元素時,它的報告就顯得相當復雜,不同瀏覽器都有自己一套標準(但是仍然可以肯定的是這兩個屬性報告的仍然是該元素占據的的空間大小,只不過會因字體和空格的默認大小不同而不同),最讓人摸不著頭腦的是Opera,對于一個body的子塊級元素,當body和它自身沒設置寬高時,Opera報告的它的寬度相當大,6千多像素! * 還有就是scrollWidth和scrollWidth了,就目前來講,對于一個沒有滾動條和溢出的元素,其它瀏覽器對這個屬性的報告還算有規律:對象的clientWidth+border=scrollWidth.對象的clientHeight+border=scrollHeight;只有IE報告有問題!它以元素中的內容為準,如果元素內沒有其它內容,雖然IE并不會報0,但會報告一個非常小的值!再看看當元素有滾動條時怎么樣吧!唯一值得高興的是,它們對有滾動條的元素的clientWidth和clientHeight都報告一致(但仍有一點要注意,那就是火狐的一BUG,頁面縮放功能帶來的郁悶,而且這次變化非常大).而對于scrollWidth和scrollHeight真是五花八門:先說好的,盡管各不一樣,但它們對scrollWidth不知為什么,相差不大,那么壞的就是,scrollHeight屬性就相差太大了,沒規律可循!(scrollWidth和scrollHeight屬性返加對象內容的實際所需空間,當元素設置了overflow值為scroll或hidden之類時,scrollWidth和scrollHeight屬性就派上用場了,可惜的是它問題太多了) 綜上所述，對于一個在CSS中定義了大小的塊級元素，獲取它的實際大小是很簡單的，但對于沒有定義寬度和高度，或是一行內元素時，則沒有跨瀏覽器的解決方案可以獲取它的實際大小！ ### 窗口視口寬度和高度 對于窗口視口（視口指顯示頁面的那部分）的大小，Mozilla提供了window.innerWidth與window.innerHeight兩個屬性，而IE則沒有相對應的屬性，但可以使用document.documentElement.clientWidth與document.documentElement.clientHeight 兩個屬性來獲取！另外，對于IE6之前的版本，則需要使用document.body的clientWidth與clientHeight屬性！ ``` //獲取視口大小，依次為火狐，IE6及IE6以上的版本，IE6以下的版本 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //事實上，IE版本低于6的瀏覽器幾乎不存在了 //而同時其實火狐也支持通過document.documentElement的clientWidth,clientHeight屬性獲取視口大小 //完全可以不做任何瀏覽器檢測 w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; ``` ## 元素邊框寬度 獲取元素邊框寬度可以使用下面幾種方式 * 元素style屬性的borderWidth，但同樣它只能返回使用HTML行內style屬性定義的邊框樣式 * 使用currentStyle屬性或getComputedStyle方法，可以獲取元素CSS定義的實際邊框樣式，如果CSS沒有定義元素的邊框，一般的元素是沒有邊框的，但部分元素，如表單控件，仍然具有默認的邊框寬度！對于此類情況，也是不能依靠這種方法來獲取元素的邊框大小的！ * 對象的clientLeft和clientTop屬性。不能不說clientLeft和clientTop的名字起的太奇怪了,事實上它們的名字更應該這樣:clientBorderLeftWidth和clientBorderTopWidth(難道是太長了的原因?);更奇怪的是,它們只能取得設置在元素上的左邊框和上邊框的粗細,而沒有返回右邊和下邊的邊框寬度的屬性!另外,對于文檔根元素(documentElement),在IE中它有默認的兩像素邊框寬度,而其它瀏覽器中報告為0. ## 元素坐標 獲取元素坐標方法： * 元素style屬性的left,top屬性，不但這種方法僅適用于使用HTML style屬性聲明樣式的元素，并且只有當元素使用定位（position設置為relative,absolute,fixed,但不包含static）時，才會存在這些值 * 元素currentStyle屬性或getComputedStyle方法返回的Style對象的left,top屬性，但這種方法僅對采用定位的元素有作用 * 元素的offsetLeft與offsetTop屬性返回元素在頁面中相對于父元素的坐標。一般對于進行了定位的元素（即position為不是static的值或沒有設置），這兩個屬性的返回值為CSS中定義的元素的left,top值，當其自身有邊距時（margin），還會加上邊距。而對于沒有采用定位的元素則顯得比較復雜，我們只能考慮下設置了寬度和高度的塊級元素，因為沒有設置寬高，及行內元素，沒有辦法獲取它的寬高，即使能獲取它的left，top值也顯得無意義了。對于沒有采用定位的塊級元素，offsetLeft與offsetTop屬性將返回其自身的margin+父元素的padding。元素還有個offsetParent屬性返回元素的相對定位的父元素，當使用定位時，各個瀏覽器一致，并且和CSS里設置的吻合，當不使用定位時，父元素是WHO成了問題，各個瀏覽器認識不一樣，IE報告為其父節點，而其它瀏覽器則報告為body，當然，這次IE正確了。另外，對于表格中的一些元素，不應對其進行定位！ ### 具有滾動條時的定位 scrollLeft和scrollTop,它們用來獲得那些具有滾動條的元素滾動條滾動的距離,而沒有滾動條的元素,它總返回0.可以這樣認為,這兩個屬性報告了有滾動條元素中未顯示的左一部分的寬(scrollLeft)和上一部分的高(scrollTop).而對于頁面的滾動條，則取documentElement的scrollLeft與scrollTop屬性，但是對于谷歌瀏覽器，它會將頁面的滾動條視為document.body的！ ## Event對象與定位相關的屬性 clientX與clientY返回事件發生時鼠標在視口中的坐標；offsetX與offsetY返回事件發生時鼠標相對于目標對象的坐標，以目標對象右上角為坐標原點，而這兩個屬性的W3C DOM版本則為layerX與layerY；pageX與pageY返回事件發生時鼠標相對于頁面的坐標，雖然這個屬性IE不支持，但仍然有補救的余地！ ``` //不要在每個事件處理函數中進行判斷，而要善于利用之前的fixEvent函數！ function fixEvent(evt) { if (!evt.target) { //函數中已有的部分 evt.pageX = evt.clientX+document.documentElement.scrollLeft; evt.pageY = evt.clientY+document.documentElement.scrollTop; //可以將事件發生時鼠標在視口中的坐標加上頁面滾動的偏移量得出pageX與pageY evt.layerX = evt.offsetX; evt.layerY = evt.offsetY; } return evt; } ``` ## 拖動 最簡單的拖動腳本——拖動的基本原理 ``` window.onload = function () { var oDiv = document.getElementById("oDiv");//oDiv必須使用CSS定位 oDiv.onmousedown = drag; function drag(evt) { evt = evt || window.event; this.onmouseup = drop; this.onmousemove = moveDiv; this.offset = { x:evt.offsetX || evt.layerX, y:evt.offsetY || evt.layerY }; } function moveDiv(evt) { evt = evt || window.event; this.style.left = evt.clientX-this.offset.x+"px"; this.style.top = evt.clientY-this.offset.y+"px"; } function drop(evt) { this.onmouseup = null; this.onmousemove = null; } }; ```