Get Computed Font Size For Dom Element in Js

Get computed font size for DOM element in JS

You could try to use the non-standard IE element.currentStyle property, otherwise you can look for the DOM Level 2 standard getComputedStyle method if available :

function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}

Usage:

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

More info:

• Get Styles (QuirksMode)

Edit: Thanks to @Crescent Fresh, @kangax and @Pekka for the comments.

Changes:

• Added camelize function, since properties containing hypens, like font-size, must be accessed as camelCase (eg.: fontSize) on the currentStyle IE object.
• Checking the existence of document.defaultView before accessing getComputedStyle.
• Added last case, when el.currentStyle and getComputedStyle are not available, get the inline CSS property via element.style.

How to modify computed font-size in Javascript

You need to set the new size to the element's style.fontSize property, and not the computed value that you get from window.getComputedStyle(), e.g.

el.style.fontSize = elNewFontSize;

--

As an aside, and not directly related, there is no reason to have the variable name twice, you can initialize it with the declaration, i.e. instead of:

var elNewFontSize
elNewFontSize = ...

Simply write

var elNewFontSize = ...

How To Get Font Size in HTML

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use window.getComputedStyle.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

I want to get the font-size using window.getComputedStyle() in javascript but it can't

You should pass an element to .getComputedStyle method. .getElementsByClassName returns a collection. You either need to select the first element from the set or use .querySelector for selecting the target element. Also note that returned object by .getComputedStyle doesn't have fontSize method, it's a property. You can also use the .getPropertyValue for getting a specific value:

// select the first .menu element
var menu = document.querySelector(".menu");
var a = window.getComputedStyle(menu, null).getPropertyValue('font-size');

Getting the calculated font-size of a div

function elementCurrentStyle(element, styleName){
if (element.currentStyle){
var i = 0, temp = "", changeCase = false;
for (i = 0; i < styleName.length; i++)
if (styleName[i] != '-'){
temp += (changeCase ? styleName[i].toUpperCase() : styleName[i]);
changeCase = false;
} else {
changeCase = true;
}
styleName = temp;
return element.currentStyle[styleName];
} else {
return getComputedStyle(element, null).getPropertyValue(styleName);
}
}

alert(elementCurrentStyle(myDiv,"font-size"));

I've describe this "getting computed style" issue few weeks ago here.

cheers,

---

Related Topics