DEMO

Question

我使用rem单位在CSS中定义字体大小，我想使用javascript向最终用户提供更改字体大小的选项。

我可以使用预定义的字体大小，并使用以下函数更改字体大小：

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

我想要做的是将字体大小更改为当前字体大小的一个因素。基本上类似于以下内容：

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

我如何实现这一目标？

玩弄小提琴：http://jsfiddle.net/rahulthewall/wX94C/1/

Answer 1

纯javascript就像是

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

root.style.fontSize = "25px";

更新：使用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

Answer 2

在您的情况下看到rem单元基于font-size元素的<html>，您应该能够更改font-size并观察其余的字体大小更改为好。

我能够使用此代码：

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

（24px可以替换为任何大小。）

根据当前大小（根元素）增加javascript中根元素的字体大小

2 个答案:

DEMO