---
category: utilities/DOM
---

Gets font size in px

@param {ReactComponent|DomNode} el - component or DOM node
@returns {Object} font size in px
356503
function getFontSize (el, ignoreCache) {
  if (!canUseDOM) {
    return 16
  }

  const container = el || ownerDocument(el).documentElement

  // return the cached font size if it's there
  if (!ignoreCache && COMPUTED_CACHE[container]) {
    return COMPUTED_CACHE[container]
  }

  const fontSize = parseInt(getComputedStyle(container).getPropertyValue('font-size'))

  // cache the computed font size so that we don't have to compute it again
  COMPUTED_CACHE[container] = fontSize

  return fontSize
}
100705
function (elem)
    {
        var i, el, j, tag, attribute, value, css, cssAttrs, attr, cssName, cssValue;
        if (elem.nodeType == Strophe.ElementType.NORMAL) {
            tag = elem.nodeName;
            if(Strophe.XHTML.validTag(tag)) {
                try {
                    el = Strophe.xmlElement(tag);
                    for(i = 0; i < Strophe.XHTML.attributes[tag].length; i++) {
                        attribute = Strophe.XHTML.attributes[tag][i];
                        value = elem.getAttribute(attribute);
                        if(typeof value == 'undefined' || value === null || value === '' || value === false || value === 0) {
                            continue;
                        }
                        if(attribute == 'style' && typeof value == 'object') {
                            if(typeof value.cssText != 'undefined') {
                                value = value.cssText; // we're dealing with IE, need to get CSS out
                            }
                        }
                        // filter out invalid css styles
                        if(attribute == 'style') {
                            css = [];
                            cssAttrs = value.split(';');
                            for(j = 0; j < cssAttrs.length; j++) {
                                attr = cssAttrs[j].split(':');
                                cssName = attr[0].replace(/^\s*/, "").replace(/\s*$/, "").toLowerCase();
                                if(Strophe.XHTML.validCSS(cssName)) {
                                    cssValue = attr[1].replace(/^\s*/, "").replace(/\s*$/, "");
                                    css.push(cssName + ': ' + cssValue);
                                }
                            }
                            if(css.length > 0) {
                                value = css.join('; ');
                                el.setAttribute(attribute, value);
                            }
                        } else {
                            el.setAttribute(attribute, value);
                        }
                    }

                    for (i = 0; i < elem.childNodes.length; i++) {
                        el.appendChild(Strophe.createHtml(elem.childNodes[i]));
                    }
                } catch(e) { // invalid elements
                  el = Strophe.xmlTextNode('');
                }
            } else {
                el = Strophe.xmlGenerator().createDocumentFragment();
                for (i = 0; i < elem.childNodes.length; i++) {
                    el.appendChild(Strophe.createHtml(elem.childNodes[i]));
                }
            }
        } else if (elem.nodeType == Strophe.ElementType.FRAGMENT) {
            el = Strophe.xmlGenerator().createDocumentFragment();
            for (i = 0; i < elem.childNodes.length; i++) {
                el.appendChild(Strophe.createHtml(elem.childNodes[i]));
            }
        } else if (elem.nodeType == Strophe.ElementType.TEXT) {
            el = Strophe.xmlTextNode(elem.nodeValue);
        }

        return el;
    }
1142545
function Editor(el, model) {
  EditorInterface.call(this);
  this.el_ = el;

  _.assign(this.el_.style, constants.editorStyle, {
    padding: '0',
    overflowY: 'hidden'
  });

  this.ta_ = document.createElement('textarea');
  _.assign(this.ta_.style, constants.baseStyle, {
    display: 'block',
    margin: '0',
    border: '0',
    padding: constants.editorStyle.padding,
    width: '100%',
    height: '100%',
    font: constants.editorStyle.font,
    lineHeight: '1.2',
    outline: 'none',
    resize: 'none'
  });
  this.el_.appendChild(this.ta_);

  // Register input handlers. Use 'input' event to catch text mutations, and
  // various other events to catch selection mutations.
  this.ta_.addEventListener('input', this.handleInput_.bind(this));

  var handler = this.updateSelection_.bind(this);
  this.ta_.addEventListener('input', handler);
  this.ta_.addEventListener('keydown', handler);
  this.ta_.addEventListener('mousedown', handler);
  this.ta_.addEventListener('mousemove', handler);
  this.ta_.addEventListener('select', handler);
  window.addEventListener('blur', this.blur.bind(this));

  this.reset(model);
}
341355
function(value) {
            if (!this.browser.webkit) {
                var el = this._getSelectedElement();
                if (el && this._isElement(el, 'span') && this._hasSelection()) {
                    if (el.style.fontWeight == 'bold') {
                        el.style.fontWeight = '';
                        var b = this._getDoc().createElement('b'),
                        par = el.parentNode;
                        par.replaceChild(b, el);
                        b.appendChild(el);
                    }
                }
            }
            return [true];
        }
236940
function getStyle(el, prop) {
    return window.getComputedStyle !== undefined ? window.getComputedStyle(el, null).getPropertyValue(prop) : el.currentStyle[prop];
  }
145226
function getSize(element, prop) {
	var style = getComputedStyle(element);
	if (prop === 'width') {
		return element.offsetWidth
			- parseFloat(style.borderLeftWidth)
			- parseFloat(style.paddingLeft)
			- parseFloat(style.borderRightWidth)
			- parseFloat(style.paddingRight);
	}
	else {
		return element.offsetHeight
			- parseFloat(style.borderTopWidth)
			- parseFloat(style.paddingTop)
			- parseFloat(style.borderBottomWidth)
			- parseFloat(style.paddingBottom);
	}
}
42096
function (el, spriteWidth, spriteHeight) {
        // TODO, inner text, shadow
        var rect = el.getBoundingRect();

        var scaleX = spriteWidth / rect.width;
        var scaleY = spriteHeight / rect.height;
        el.position = [-rect.x * scaleX, -rect.y * scaleY];
        el.scale = [scaleX, scaleY];
        el.update();
    }
1042313
function getjSXElement(babelTypes, name, attributes, children) { // {{{
  return babelTypes.jSXElement(
    babelTypes.JSXOpeningElement(
      babelTypes.jSXIdentifier(name),
      attributes,
      true
    ),
    null,
    children,
    true
  );
}
1172184
function getBoundingRect(el) {
    const clientRect = el.getBoundingClientRect();
    const bound = {
      left: clientRect.left,
      top: clientRect.top,
      width: clientRect.width,
      height: clientRect.height
    };

    let frame = el.ownerDocument.defaultView.frameElement;
    while (frame) {
      const frameBound = frame.getBoundingClientRect();
      // This computation doesn't account for more complex CSS transforms on the
      // frame (e.g. scaling or rotations).
      bound.left += frameBound.left;
      bound.top += frameBound.top;

      frame = frame.ownerDocument.frameElement;
    }
    return bound;
  }
464726
function MyComponent() {
  const theme = useTheme();
  const width =
    [...theme.breakpoints.keys].reverse().reduce((output, key) => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const matches = useMediaQuery(theme.breakpoints.only(key));

      return !output && matches ? key : output;
    }, null) || 'xs';

  return <span>{`width: ${width}`}</span>;
}
1015953
function isElementInViewport(el) {
    var eap;
    var rect = el.getBoundingClientRect();
    var docEl = document.documentElement;
    var vWidth = window.innerWidth || docEl.clientWidth;
    var vHeight = window.innerHeight || docEl.clientHeight;
    var efp = function (x, y) { return document.elementFromPoint(x, y); };
    var contains = el.contains ? (function (node) { return el.contains(node); }) : (function (node) { return el.compareDocumentPosition(node) == 0x10; });
    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0
        || rect.left > vWidth || rect.top > vHeight)
        return false;
    // Return true if any of its four corners are visible
    return ((eap = efp(rect.left, rect.top)) == el || contains(eap)
        || (eap = efp(rect.right, rect.top)) == el || contains(eap)
        || (eap = efp(rect.right, rect.bottom)) == el || contains(eap)
        || (eap = efp(rect.left, rect.bottom)) == el || contains(eap));
}
308624
function(el, styleProperty){
            if(el.currentStyle){
                return el.currentStyle[styleProperty];
            }else if(window.getComputedStyle){
                var cssProperty = styleProperty.replace(/([A-Z])/g, "-$1").toLowerCase();
                var computedStyle = window.getComputedStyle(el, "");
                return computedStyle.getPropertyValue(cssProperty);
            }else{
                return "";
            }
        }
966278
function(el) {
                    var x = 0, y = 0, offsetEl = el, width = el.offsetWidth, height = el.offsetHeight;
                    while (offsetEl) {
                        x += offsetEl.offsetLeft;
                        y += offsetEl.offsetTop;
                        offsetEl = offsetEl.offsetParent;
                    }

                    return adjustClientRect(new Rect(y, x + width, y + height, x), dom.getDocument(el));
                }
1133621
function getComputedStyle(prop, el) {
    var retVal = 0
    el = el || document.body // Not testable in phantonJS

    retVal = document.defaultView.getComputedStyle(el, null)
    retVal = null !== retVal ? retVal[prop] : 0

    return parseInt(retVal, base)
  }
714020
function(font) {
    var xml = this.map.font.toXml(font);
    var index = this.index.font[xml];
    if (index === undefined) {
      index = this.index.font[xml] = this.model.fonts.length;
      this.model.fonts.push(xml);
    }
    return index;
  }
1221091
def get_header(self, elem, style, node):
        
        font_size = style
        if hasattr(elem, 'possible_header'):
            if elem.possible_header:
                return 'h1'

        if not style:
            return 'h6'

        if hasattr(style, 'style_id'):
            font_size = _get_font_size(self.doc, style)

        try:
            if font_size in self.doc.possible_headers_style:
                return 'h{}'.format(self.doc.possible_headers_style.index(font_size)+1)

            return 'h{}'.format(self.doc.possible_headers.index(font_size)+1)
        except ValueError:
            return 'h6'
1219595
function (element) {
                // In IE we may get non-pixel value, need to convert it. Special case for input in em's to avoid
                // infinite recursion.
                var property = "fontSize";
                var sizeWithUnit = this.__getStyleSimplified(element, property);
                var inEms = sizeWithUnit.match("(.*)em$");
                if (inEms) {
                    // if font-size is in ems, then multiply by 16 to convert to pixels
                    return parseFloat(inEms[1]) * 16;
                }
                return this.convertToPixels(sizeWithUnit, element, property);
            }