JSFiddle - React, Tailwind, and code Playground

by tomgrohl

HTML

<div id="test"></div>
<div id="test2"></div>

IE 9.0.8112 on Windows 7 returns false when testing the font size.<br />

CSS

#test {
    /* In a real world example this would be a relative font-size */
    font-size: 3.14px;
}


#test2 {
    /* In a real world example this would be a relative font-size */
    font-size: 3px;
}

JavaScript

// http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ (cosmetic changes)
function getStyle(el, prop) {
    var val = null;
    if (document.defaultView && document.defaultView.getComputedStyle) {
        val = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop);
    } else if (el.currentStyle) {
        prop = prop.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        val = el.currentStyle[prop];
        console.log(val);
    }
    return val;
}

// RegExp from jQuery source
var rnumpx = /^-?\d+(?:px)?$/i,
    newrnumpx = /^-?\d+(?:\.\d+)?(?:px)?$/i;

// Test case
var el = document.getElementById('test'),
    el2 = document.getElementById('test2')
    fontSize = getStyle(el, 'font-size');
    fontSize2 = getStyle(el2, 'font-size');

//3.14px
console.log(fontSize, rnumpx.test(fontSize));
console.log(fontSize, newrnumpx.test(fontSize));

//3px
console.log(fontSize2, rnumpx.test(fontSize2));
console.log(fontSize2, newrnumpx.test(fontSize2));