windows物件屬性總結

獲取url中一部分：

alert(window.location.pathname);//設定或獲取物件指定的檔名或路徑
alert(window.location.href);//設定或獲取整個 url 為字串
alert(window.location.port);//設定或獲取與 url 關聯的埠號碼
alert(window.location.protocol);//設定或獲取 url 的協議部分
alert(window.location.hash);//設定或獲取 href 屬性中在井號「#」後面的分段
alert(window.location.host);//設定或獲取 location 或 url 的 hostname 和 port 號碼
alert(window.location.search);//設定或獲取 href 屬性中跟在問號後面的部分

獲取元素的實際大小

clientwidth和clientheight

這組屬性可以獲取元素可視區的大小，可以得到元素內容及內邊距所佔據的空間大小。返回了元素大小，但沒有單位，預設單位是px，如果你強行設定了單位，比如100em之類，它還是會返回px的大小。(css獲取的話，是照著你設定的樣式獲取)。對於元素的實際大小，clientwidth和clientheight理解方式如下：

增加邊框，無變化；

增加外邊距，無變化；

增加滾動條，最終值等於原本大小減去滾動條的大小；

增加內邊距，最終值等於原本大小加上內邊距的大小；

scrollwidth和scrollheight

這組屬性可以獲取滾動內容(可見內容)的元素大小。返回了元素大小，預設單位是px。如果沒有設定任何css的寬和高度，它會得到計算後的寬度和高度。對於元素的實際大小，scrollwidth和scrollheight理解如下:

(1) 增加邊框，不同瀏覽器不同解釋（下面在ie8中執行正常，ie6執行不正常）：

a) firefox和opera瀏覽器會增加邊框的大小，220x220

b) ie、chrome和safari瀏覽器會忽略邊框大小，200x200

c) ie瀏覽器只顯示它本來內容的高度，200x18（ie8已經修改該問題）

(2) 增加內邊距，最終值會等於原本大小加上內邊距大小，220x220，ie為220x38

(3) 增加滾動條，最終值會等於原本大小減去滾動條大小，184x184，ie為184x18

(4) 增加外邊據，無變化。

(5) 增加內容溢位，firefox、chrome和ie獲取實際內容高度，opera比前三個瀏覽器獲取的高度偏小，safari比前三個瀏覽器獲取的高度偏大

offsetwidth和offsetheight

這組屬性可以返回元素實際大小，包含邊框、內邊距和滾動條。返回了元素大小，預設單位是px。如果沒有設定任何css的寬和高度，他會得到計算後的寬度和高度。對於元素的實際大小，offsetwidth和offsetheight理解如下：

(1)增加邊框，最終值會等於原本大小加上邊框大小，為220；

(2)增加內邊距，最終值會等於原本大小加上內邊距大小，為220；

(3) 增加外邊據，無變化；

(4)增加滾動條，無變化，不會減小；

對於元素大小的獲取，一般是塊級(block)元素並且以設定了css大小的元素較為方便。如果是內聯元素(inline)或者沒有設定大小的元素就尤為麻煩，所以，建議使用的時候注意

獲取元素周邊大小

clientleft和clienttop獲取邊框大小

這組屬性可以獲取元素設定了左邊框和上邊框的大小。目前只提供了left和top這組，並沒有提供right和bottom。如果四條邊寬度不同的話，可以直接通過計算後的樣式獲取，或者採用以上三組獲取元素大小的減法求得

右邊框的寬度：obj.offsetwidth-obj.clientwidth-obj.clientleft

底邊框的寬度：obj.offsetheight-obj.clientheight-obj.clienttop

offsetleft和offsettop

這組屬性可以獲取當前元素相對于父元素的位置。獲取元素當前相對于父元素的位置，最好將它設定為定位position:absolute；否則不同的瀏覽器會有不同的解釋。

a、將position設定為absolute，則所有瀏覽器返回一樣的值

b、加上邊框和內邊距不會影響它的位置，但加上外邊據會累加

3、box.offsetparent得到父元素

offsetparent中，如果本身父元素是

，非ie返回body物件，ie（ie6）返回html物件。如果兩個元素巢狀，如果父元素沒有使用定位position:absolute，那麼offsetparent將返回body物件或html物件。所以，在獲取offsetleft和offsettop時候，css定位很重要

如果說，在很多層次裡，外層已經定位，我們怎麼獲取裡層的元素距離body或html元素之間的距離呢？也就是獲取任意乙個元素距離頁面上的位置。那麼我們可以編寫函式，通過不停的向上回溯獲取累加來實現

4.scrolltop和scrollleft

這組屬性可以獲取滾動條被隱藏(滾動條上方區域)的區域大小，也可設定定位到該區域

5、getboundingclientrect()

這個方法返回乙個矩形物件，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離

var box=document.getelementbyid('box');// 獲取元素
alert(box.getboundingclientrect().top);// 元素上邊距離頁面上邊的距離
alert(box.getboundingclientrect().right);// 元素右邊距離頁面左邊的距離
alert(box.getboundingclientrect().bottom);// 元素下邊距離頁面上邊的距離
alert(box.getboundingclientrect().left);// 元素左邊距離頁面左邊的距離

注意：ie、firefox3+、opera9.5、chrome、safari支援，在ie中，預設座標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個畫素，我們需要做個相容

document.documentelement.clienttop; //非ie為0，ie為2
document.documentelement.clientleft; //非ie為0，ie為2
functionggetrect (element) 
}

分別加上外邊據、內邊距、邊框和滾動條，用於測試所有瀏覽器是否一致

$.ajax(,//ajax請求完成時隱藏loading提示
success: function(msg){});//msg為返回的資料，在這裡做資料繫結
})

windows物件屬性總結

上課了總結windows物件屬性

JS物件陣列總結建立屬性方法

標籤屬性物件屬性

windows物件屬性總結

上課了總結windows物件屬性

JS物件 陣列總結 建立 屬性 方法

標籤屬性 物件屬性

相關推薦

JS物件陣列總結建立屬性方法

標籤屬性物件屬性