jQuery中的.height()、.innerHeight()和.outerHeight()

標籤：高度   clu   null   技術分享   調用   計算   擷取   query   code   

jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相關的幾個擷取元素尺寸的方法。對應的寬度擷取方法分別為.width()、.innerWidth()和.outerWidth()，在此不詳述。

1. .height()

擷取匹配元素集合中的第一個元素的當前計算高度值 或 設定每一個匹配元素的高度值（帶一個參數）。

 

注意：1）.css(‘height‘) 和 .height()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字串（例如，400px）。

2）.height()總是返回內容寬度,不管CSS box-sizing屬性值。.height(‘value‘)設定的容器寬度是根據CSS box-sizing屬性來定的, 將這個屬性值改成border-box，將造成這個函數改變這個容器的outerHeight，而不是原來的內容高度。

2. .innerHeight()

為匹配的元素集合中擷取第一個元素的當前計算高度值,包括padding，但是不包括border。

3. .outerHeight()

擷取元素集合中第一個元素的當前計算高度值,包括padding，border和選擇性的margin。返回一個整數（不包含“px”）表示的值 ，或如果在一個空集合上調用該方法，則會返回 null。

在.outerHeight()計算中總是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin參數是true，那麼margin (top 和 bottom)也會被包含。

jQuery中的.height()、.innerHeight()和.outerHeight()