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

StackOverflow https://stackoverflow.com/questions/23393810

  •  12-07-2023
  •  | 
  •  

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/

Was it helpful?

Solution 2

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.)

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top