在jQuery中，獲取元素高度的函數有3個，它們分別是height()、 innerHeight()、 outerHeight()。
與此相對應的是，獲取元素寬度的函數也有3個，它們分別是width()、 innerWidth()、 outerWidth()。
在這里，我們以height()、innerHeight()、outerHeight()3個函數為例，來詳細介紹它們之間的區別。
下面我們以元素element的盒模型為例來介紹它們之間的區別。
| 函數 | 高度范圍 | jQuery版本 | 支持寫操作 |
|---|---|---|---|
height() | height | 1.0+ | 1.0+ |
innerHeight() | height + padding | 1.2.6+ | 1.8.0+ |
outerHeight() | height + padding + border | 1.2.6+ | 否 |
outerHeight(true) | height+padding+border+margin | 1.2.6+ | 否 |
1、 只有height()函數可用于window或document對象。
2、 "支持寫操作"表示該函數可以為元素設置高度值。
3、 1.4.1+ height()新增支持參數為函數(之前只支持數值)。
4、 1.8.0+ innerHeight()支持參數為數值或函數。
現在，我們參考以下HTML + jQuery示例代碼：
<div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div><script type="text/javascript">var $ele = $("#element");// height() = height(100) = 100document.writeln( $ele.height() ); // 100// innerHeight() = height(100) + padding(10*2)= 120 document.writeln( $ele.innerHeight() ); // 120// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 document.writeln( $ele.outerHeight() ); // 122// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 document.writeln( $ele.outerHeight(true) ); // 132</script>測試的時候記得機上jquery地址。
新聞熱點
疑難解答
