get-size.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * getSize v2.0.2
  3. * measure size of elements
  4. * MIT license
  5. */
  6. /*jshint browser: true, strict: true, undef: true, unused: true */
  7. /*global define: false, module: false, console: false */
  8. ( function( window, factory ) {
  9. 'use strict';
  10. if ( typeof define == 'function' && define.amd ) {
  11. // AMD
  12. define( function() {
  13. return factory();
  14. });
  15. } else if ( typeof module == 'object' && module.exports ) {
  16. // CommonJS
  17. module.exports = factory();
  18. } else {
  19. // browser global
  20. window.getSize = factory();
  21. }
  22. })( window, function factory() {
  23. 'use strict';
  24. // -------------------------- helpers -------------------------- //
  25. // get a number from a string, not a percentage
  26. function getStyleSize( value ) {
  27. var num = parseFloat( value );
  28. // not a percent like '100%', and a number
  29. var isValid = value.indexOf('%') == -1 && !isNaN( num );
  30. return isValid && num;
  31. }
  32. function noop() {}
  33. var logError = typeof console == 'undefined' ? noop :
  34. function( message ) {
  35. console.error( message );
  36. };
  37. // -------------------------- measurements -------------------------- //
  38. var measurements = [
  39. 'paddingLeft',
  40. 'paddingRight',
  41. 'paddingTop',
  42. 'paddingBottom',
  43. 'marginLeft',
  44. 'marginRight',
  45. 'marginTop',
  46. 'marginBottom',
  47. 'borderLeftWidth',
  48. 'borderRightWidth',
  49. 'borderTopWidth',
  50. 'borderBottomWidth'
  51. ];
  52. var measurementsLength = measurements.length;
  53. function getZeroSize() {
  54. var size = {
  55. width: 0,
  56. height: 0,
  57. innerWidth: 0,
  58. innerHeight: 0,
  59. outerWidth: 0,
  60. outerHeight: 0
  61. };
  62. for ( var i=0; i < measurementsLength; i++ ) {
  63. var measurement = measurements[i];
  64. size[ measurement ] = 0;
  65. }
  66. return size;
  67. }
  68. // -------------------------- getStyle -------------------------- //
  69. /**
  70. * getStyle, get style of element, check for Firefox bug
  71. * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
  72. */
  73. function getStyle( elem ) {
  74. var style = getComputedStyle( elem );
  75. if ( !style ) {
  76. logError( 'Style returned ' + style +
  77. '. Are you running this code in a hidden iframe on Firefox? ' +
  78. 'See http://bit.ly/getsizebug1' );
  79. }
  80. return style;
  81. }
  82. // -------------------------- setup -------------------------- //
  83. var isSetup = false;
  84. var isBoxSizeOuter;
  85. /**
  86. * setup
  87. * check isBoxSizerOuter
  88. * do on first getSize() rather than on page load for Firefox bug
  89. */
  90. function setup() {
  91. // setup once
  92. if ( isSetup ) {
  93. return;
  94. }
  95. isSetup = true;
  96. // -------------------------- box sizing -------------------------- //
  97. /**
  98. * WebKit measures the outer-width on style.width on border-box elems
  99. * IE & Firefox<29 measures the inner-width
  100. */
  101. var div = document.createElement('div');
  102. div.style.width = '200px';
  103. div.style.padding = '1px 2px 3px 4px';
  104. div.style.borderStyle = 'solid';
  105. div.style.borderWidth = '1px 2px 3px 4px';
  106. div.style.boxSizing = 'border-box';
  107. var body = document.body || document.documentElement;
  108. body.appendChild( div );
  109. var style = getStyle( div );
  110. getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
  111. body.removeChild( div );
  112. }
  113. // -------------------------- getSize -------------------------- //
  114. function getSize( elem ) {
  115. setup();
  116. // use querySeletor if elem is string
  117. if ( typeof elem == 'string' ) {
  118. elem = document.querySelector( elem );
  119. }
  120. // do not proceed on non-objects
  121. if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
  122. return;
  123. }
  124. var style = getStyle( elem );
  125. // if hidden, everything is 0
  126. if ( style.display == 'none' ) {
  127. return getZeroSize();
  128. }
  129. var size = {};
  130. size.width = elem.offsetWidth;
  131. size.height = elem.offsetHeight;
  132. var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
  133. // get all measurements
  134. for ( var i=0; i < measurementsLength; i++ ) {
  135. var measurement = measurements[i];
  136. var value = style[ measurement ];
  137. var num = parseFloat( value );
  138. // any 'auto', 'medium' value will be 0
  139. size[ measurement ] = !isNaN( num ) ? num : 0;
  140. }
  141. var paddingWidth = size.paddingLeft + size.paddingRight;
  142. var paddingHeight = size.paddingTop + size.paddingBottom;
  143. var marginWidth = size.marginLeft + size.marginRight;
  144. var marginHeight = size.marginTop + size.marginBottom;
  145. var borderWidth = size.borderLeftWidth + size.borderRightWidth;
  146. var borderHeight = size.borderTopWidth + size.borderBottomWidth;
  147. var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
  148. // overwrite width and height if we can get it from style
  149. var styleWidth = getStyleSize( style.width );
  150. if ( styleWidth !== false ) {
  151. size.width = styleWidth +
  152. // add padding and border unless it's already including it
  153. ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
  154. }
  155. var styleHeight = getStyleSize( style.height );
  156. if ( styleHeight !== false ) {
  157. size.height = styleHeight +
  158. // add padding and border unless it's already including it
  159. ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
  160. }
  161. size.innerWidth = size.width - ( paddingWidth + borderWidth );
  162. size.innerHeight = size.height - ( paddingHeight + borderHeight );
  163. size.outerWidth = size.width + marginWidth;
  164. size.outerHeight = size.height + marginHeight;
  165. return size;
  166. }
  167. return getSize;
  168. });