How to modify root element with javascript [duplicate]

Question

I have got a question. How to change font-size of :root, using javascript? I need to make a button to resize font in a whole website.

Or as in a CSS variable? Like :root { --font-size: 16px; } — Brett DeWoody
– Brett DeWoody, Commented Mar 1, 2018 at 13:50
Also see possible duplicate at stackoverflow.com/a/33598560/2177147 — rypskar
– rypskar, Commented Mar 1, 2018 at 13:52

tevemadar · Accepted Answer · 2018-03-01 13:57:54Z

1

While I have no idea what --font-size should be, accessing :root itself seems to be working with CSSStyleSheet.insertRule()

function doThing(){
  document.styleSheets[0].insertRule(':root { font-size: 26px; }');
}

HelloWord<br>
<button onclick="doThing()">Clicky</button>

answered Mar 1, 2018 at 13:57

tevemadar

13.3k3 gold badges27 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik Terwan · Accepted Answer · 2018-03-01 13:50:10Z

0

If you change the document.body.style.fontSize you are basically changing the :root. As long as the rest of your styles use em or rem font-sizes, all the text on the site should change accordingly.

answered Mar 1, 2018 at 13:50

Erik Terwan

2,79020 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to modify root element with javascript [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related