Increasing font size of root element in javascript based on current size (of root element)

Question

I am using rem units to define font sizes in my CSS and I would like to use javascript to present the end user the options to change font sizes.

I can use pre-defined font-sizes and change the font-size using the following function:

document.documentElement.style.fontSize = "67.5%"

What I want to do is change the font size as a factor of the current font size. Basically something like the following:

document.documentElement.style.fontSize = Number(document.documentElement.style.fontSize) + Number(5) + "%"

How do I go about achieving this?

Fiddle for playing around: http://jsfiddle.net/rahulthewall/wX94C/1/

Answer 1

pure javascript would be something like

var root = document.querySelector(":root");

root.style.fontSize = "25px";

update: using window.getComputedStyle

    var root = document.querySelector("p"),
       style = window.getComputedStyle(root, null).getPropertyValue('font-size'),
    fontSize = parseFloat(style);

root.style.fontSize = (10*fontSize)+'px';

DEMO