JAVASCRIPT   29

get size js

Guest on 13th July 2022 06:50:39 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.