jQuery box model

by bgmort

HTML

<div id="container">
  <div id="outer">
    <div id="inner">Here is some content</div>
  </div>
</div>

<div id="size">
</div>

CSS

#container {
 background-color: yellow;
 display:inline-block
}
#outer {
 background-color:#eee;
 border: 5px solid black;
 margin: 15px;
 padding: 10px;
 display: inline-block;
}
#inner {
 width: 100px;
 background-color:white;
}
.neighbor {
 display: inline-block;
 margin: 1px;
 background-color: black;
 height: 30px;
 width: 30px;
}
div { vertical-align: top }

JavaScript

var pt = document.createElement('script');
pt.src = 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js';
document.head.appendChild(pt);

var jq = document.createElement('script');
jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js';
document.head.appendChild(jq);

jq.onload = function(){
    jQuery.noConflict();
        
    var outer = jQuery('#outer');
    jQuery('#size').append(
        'width(): ' + outer.width() + '<br>' + 
        'innerWidth(): ' + outer.innerWidth() + '<br>' + 
        'outerWidth(): ' + outer.outerWidth() + '<br>' + 
        'outerWidth(true): ' + outer.outerWidth(true) + '<br>' + 
        'height(): ' + outer.height() + '<br>' + 
        'innerHeight(): ' + outer.innerHeight() + '<br>' + 
        'outerHeight(): ' + outer.outerHeight() + '<br>' + 
        'outerHeight(true): ' + outer.outerHeight(true) + '<br>' + 
        '<br>' + 
        '<b>Prototype</b><br>' + 
        'getWidth(): ' + outer[0].getWidth() + '<br>' + 
        'getHeight(): ' + outer[0].getHeight() + '<br>' + 
        'getWidth()  + margins: ' + (outer[0].getWidth()
                                     + parseInt(outer[0].getStyle('margin-left'))
                                     + parseInt(outer[0].getStyle('margin-right'))) + '<br>' + 
        'getHeight() + margins: ' + (outer[0].getHeight()
                                     + parseInt(outer[0].getStyle('margin-top'))
                                     + parseInt(outer[0].getStyle('margin-bottom'))) + '<br>' + 
        '');        
}