在jQuery中,獲取元素高度的函式有3個,它們分別是height()、 innerHeight()、 outerHeight()。
與此相對應的是,獲取元素寬度的函式也有3個,它們分別是width()、 innerWidth()、 outerWidth()。
在這裡,我們以height()、innerHeight()、outerHeight()3個函式為例,來詳細介紹它們之間的區別。
下面我們以元素box的盒模型為例來介紹它們之間的區別。
height():height
innerHeight():height + padding
outerHeight():height + padding + border
outerHeight(true):height+padding+border+margin
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery-1.10.1.min.js"></script></head><body><div id="box" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div><script>var $ele = $("#box");// 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></body></html>
效果圖:
height()innerHeight()outerHeight()
