Login / Join
.height() vs. .outerHeight()
submitted on 02/09/2014 by
Codicode
+ infos
Config
Embed
Share
.height() vs. .outerHeight()
by
Codicode
what's the difference between jquery's .height() and .outerHeight() values.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="8e2" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div id="myDiv"> </div> <b>height :</b> content height<br> <b>outerHeight :</b> content height + padding + border thinkness<br> <i>* default box model</i>
CSS
body{ background-color:white; text-align:center; } #myDiv{ color:white; background-color:red; border:solid 20px grey; width:300px; height:80px; margin:20px auto; padding:15px; }
Javascript
$(window).load(function () { var r = 'height : ' + $('#myDiv').height() + ' px<br>'; r += 'outerHeight : ' + $('#myDiv').outerHeight() + ' px<br>'; $('#myDiv').html(r); });
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact