Search code examples
javascripthtmlcssfonts

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

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/

Solution

  • Seeing as rem units are based on the font-size of the <html> element in your case, you should be able to change that font-size and watch the rest of the font sizes change as well.

    I was able to use this code:

    jQuery(document).ready(function() { jQuery('html').css('font-size', '24px'); });

    (24px can be replaced with any size.)