如何获取由css设置的元素的字体大小

Question

I'm writing a simple jQuery that to change the font size of an element by a certain percentage. The problem I'm having is that when I get the size with jQuery's $('#el').css('font-size') it always returns a pixel value, even when set with em's. When I use Javscript's el.style.font-size property, it won't return a value until one has been explicitly set by the same property.

Is there some way I can get the original CSS set font-size value with Javascript? How cross-browser friendly is your method?

Thanks in advance!

Edit: I should note that all the tested browsers (See comment below) allow me to set the the text-size using an 'em' value using the two methods mentioned above, at which point the jQuery .css() returns an equivalent 'px' value and the Javascript .style.fontSize method returns the correct 'em' value. Perhaps the best way to do this would be to initialize the elements on page load, giving them an em value right away.

Answer 1

All of your target browsers with the exception of IE will report to you the "Computed Style" of the element. In your case you don't want to know what the computed px size is for font-size , but rather you want the value set in your stylesheet(s).

Only IE can get this right with its currentStyle feature. Unfortunately jQuery in this case works against you and even gets IE to report the computed size in px (it uses this hack by Dean Edwards to do so, you can check the source yourself).

So in a nutshell, what you want is impossible cross-browser. Only IE can do it (provided you bypass jQuery to access the property). Your solution of setting the value inline (as opposed to in a stylesheet) is the best you can do, as then the browser does not need to compute anything.

Answer 2

This jQuery plugin looks like it will do the trick:

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

Github: jQuery-Pixel-Em-Converter

Answer 3

i had this problem once. i use this function to get the int value of a css attribute, if there is one.

function PBMtoInt(str)
{ 
return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0");
}

Answer 4

In Chrome:

var rules = window.getMatchedCSSRules(document.getElementById('target'))

returns a CSSRuleList object. Need to do a bit more experimentation with this, but it looks like if m < n then the CSSStyleRule at rules[n] overrides the one at rules[m] . So:

for(var i = rules.length - 1; i >= 0; --i) {
    if(rules[i].style.fontSize) {
        return /.*(em|ex|ch|rem|vh|vw|vmin|vmax|px|in|mm|cm|pt|pc|%)$/.exec(rules[i].style.fontSize)[1];
    }
}

In Firefox, maybe use sheets = document.styleSheets to get all your stylesheets as a StyleSheetList , then iterate over each CSSStyleSheet sheet in sheets . Iterate through the CSSStyleRule s in sheet (ignoring the CSSImportRule s) and test each rule against the target element via document.getElementById('target').querySelector(rule.selectorText) . Then apply the same regexp as above..... but that's all just a guess, I haven't tested it out or anything....