jquery innerHeight()和outerHeight()的區別
本章節介紹一下這兩個函式的區別,從名稱上看都是用來獲取高度的,當然也是有區別的,從名稱上也能夠對其有一個簡單的瞭解,下面就通過程式碼例項介紹一下這兩者的區別。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> p{ background-color:green; height:100px; width:200px; padding:10px; border:5px solid red; margin:10px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#inner").text($("p").innerHeight()) $("#outer").text($("p").outerHeight()) }); }); </script> </head> <body> <p></p> <span id="inner"></span> <span id="outer"></span> <input type="button" id="bt" value="檢視效果"/> </body> </html>
從上面的運算結果可以看出,兩個函式獲取的值是有所區別的,下面就做一下簡單介紹。
innerHeight()函式獲取的是指定元素的width和padding之和。
outerHeight()函式獲取的是指定元素的width、padding和border之和。
也就是兩者的區別在於是否包含邊框。
相關閱讀:
1.innerHeight()函式可以參閱jQuery innerHeight()方法一章節。
2.outerHeight()函式可以參閱jQuery outerHeight()方法一章節。
相關文章
- innerheight() ,outerheight()和height()的區別
- jQuery outerHeight()jQuery
- jQuery innerHeight()jQuery
- JQuery this和$(this)的區別jQuery
- jquery $(this) 和this的區別jQuery
- jQuery not()和filter()區別jQueryFilter
- jQuery之height()、innerHeight()、outerjQuery
- jquery prop和attr的區別jQuery
- jQuery的html()和text()區別jQueryHTML
- jQuery filter()和find()區別jQueryFilter
- jQuery parents()和parent()區別jQuery
- 使用jquery和使用框架的區別jQuery框架
- jquery中prop和attr的區別jQuery
- Jquery中attr和prop的區別jQuery
- Jquery中.attr()和.data()的區別jQuery
- jQuery.extend和jQuery.fn.extend的區別jQuery
- JQuery中html()和val()的用法區別jQueryHTML
- jQuery中css()和attr()方法的區別jQueryCSS
- jQuery mouseout和mouseleave事件的區別jQuery事件
- jQuery mouseleave和mouseout 區別jQuery
- 區別 Jquery物件和Dom物件jQuery物件
- Jquery的$(selector).each()和$.each()原理和區別jQuery
- jquery包括margin外邊距的outerWidth或者outerHeightjQuery
- XML和HTML的主要區別、 jQuery 能做什麼?JavaScript中的“=、==、===”區別?XMLHTMLjQueryJavaScript
- jQuery實戰之 attr() 和 prop() 的區別jQuery
- jquery Promise和ES6 Promise的區別jQueryPromise
- docment.getelementbyid 和jquery裡的$(#'id')區別jQuery
- jquery position()函式和offset()函式的區別jQuery函式
- jquery的$.extend和$.fn.extend作用及區別jQuery
- jQuery ajax中success和complete區別jQuery
- jquery中attr和prop的區別+jquery實現全選全不選jQuery
- jquery的$.each()函式和$.map()函式的區別jQuery函式
- [譯] Jquery中 .bind() .live() .delegate() 和 .on() 之間的區別jQuery
- jquery物件和DOM物件的區別及互相轉化jQuery物件
- $(function(){})與(function($){....})(jQuery)的區別FunctionjQuery
- jQuery的AJAX請求中contentType和dataType的區別jQuery
- JQuery this和$(this)的區別及獲取$(this)子元素物件的方法jQuery物件
- jquery中append、prepend, before和after方法的區別jQueryAPP