How to Get the Computed Font Size of a DOM Element in JavaScript?

How to Retrieve Computed Font Size in JavaScript

Determining the actual font size of a DOM element is crucial in various scenarios, such as customizing text editors or designing responsive web layouts. This involves considering not just the element's explicit style but also inherited values and browser-level settings.

Solution

To obtain the computed font size, you can leverage two methods:

1. Browser-Specific Method: currentStyle

For Internet Explorer, you can use the non-standard currentStyle property:

element.currentStyle['fontSize']

Note that property names containing hyphens, like font-size, must be accessed in camelCase (e.g., fontSize) for currentStyle.

2. Standard Method: getComputedStyle

For all other browsers and cross-browser compatibility, you can employ the DOM Level 2 standard getComputedStyle method:

document.defaultView.getComputedStyle(element, null).getPropertyValue('fontSize')

Implementation Example

Define a utility function to fetch the style:

function getStyle(element, styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };
  
  if (element.currentStyle) {
    return element.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(element,null)
                               .getPropertyValue(styleProp);
  } else {
    return element.style[camelize(styleProp)]; 
  }
}

Usage:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

Additional Tips

• Check the existence of document.defaultView before accessing getComputedStyle.
• If both currentStyle and getComputedStyle are unavailable, use element.style to retrieve inline CSS properties.

The above is the detailed content of How to Get the Computed Font Size of a DOM Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!