javascript change font size

fonts, html, javascript

Solution

I'd suggest the following:

document.getElementById('display-date').style.fontSize = '2em'; // or whatever measurement.

And, because I had a few moments, here's a function:

function fontSizeChange(elem, factor) {
    if (!elem) {
        return false;
    }
    else {
        factor = factor || 2; // 2 is the default
        elem = elem.nodeType && elem.nodeType === 1 ? elem : document.getElementById(elem);
        var cur = window.getComputedStyle(elem, null).fontSize,
            size = parseInt(cur.replace(/\D+/g,''),10),
            unit = cur.replace(/\d+/g,'');
        elem.style.fontSize = (size * factor) + unit;
    }    
}

Call like so:

fontSizeChange('display-date', 3);

JS Fiddle demo.

Or:

fontSizeChange(document.getElementById('display-date'), 4);

JS Fiddle demo.

Or (if you want to use the default setting, you can omit the `factor` argument):

fontSizeChange('display-date');

JS Fiddle demo.

And, of course, you can shrink thngs too:

fontSizeChange('display-date',0.25);

JS Fiddle demo.

You could also, of course, use CSS:

#display-date {
    font-size: 2em;
}

JS Fiddle demo.

An updated version that allows the resizing to be attached to a returned element (`document.querySelector()` / `document.getElementById()`) or a nodeList (`document.getElementsByTagName()` / `document.querySelectorAll()`):

Object.prototype.resize = function (prop, factor) {
    if (prop) {
        factor = parseFloat(factor) || 2;
        var self = this.length ? this : [this],
            cur, size, unit;
        for (var i = 0, len = self.length; i < len; i++) {
            var cur = window.getComputedStyle(self[i],null)[prop],
                size = parseFloat(cur.replace(/\D/g,'')),
                unit = cur.replace(/\d+/g,'');
            self[i].style[prop] = (size * factor) + unit;
        }
    }
    return this;
};

document.getElementsByTagName('div').resize('width',3);
document.getElementById('display-date').resize('font-size', 2.5);

JS Fiddle demo.

Object.prototype.resize = function (prop, factor) {
    if (prop) {
        factor = parseFloat(factor) || 2;
        var self = this.length ? this : [this],
            cur, size, unit;
        for (var i = 0, len = self.length; i < len; i++) {
            var cur = window.getComputedStyle(self[i],null)[prop],
                size = parseFloat(cur.replace(/\D/g,'')),
                unit = cur.replace(/\d+/g,'');
            self[i].style[prop] = (size * factor) + unit;
        }
    }
    return this;
};

document.querySelectorAll('div').resize('height',3);
document.querySelector('#display-date').resize('font-size', 0.5);

JS Fiddle demo.

References:

- `element.style`.

Problem

Original source