我使用rem單位來定義CSS中的字體大小，我想使用javascript向最終用戶顯示更改字體大小的選項。根據當前的大小（根元素）增加javascript中根元素的字體大小

我可以使用預先定義的字體大小和使用下面的函數改變字體大小：

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

我想要做的是改變字體大小作爲當前字體大小的一個因素。基本上如下所示：

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

我該如何去實現這個目標？

搗鼓打轉轉：http://jsfiddle.net/rahulthewall/wX94C/1/

來源

2014-04-30 rahulthewall

看到，因爲REM單位是根據你的情況<html>元素的font-size，你應該能夠改變font-size，看字體的大小改變以及休息。

我能夠使用此代碼：（24px可以與任何尺寸代替）

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

來源

2014-04-30 22:22:01 esswilly

問題不在於更改字體大小，問題在於更改相對於當前字體大小的字體大小。我想將當前字體大小增加10％（例如）。我怎麼做？ – rahulthewall

您可以使用'parseInt（jQuery（'html'）.css（'font-size'））'獲取現有的'font-size'，然後將其用作參考。這裏是更新的[jsfiddle]（http://jsfiddle.net/wX94C/2/）。 – esswilly

非常感謝。 – rahulthewall

像

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

root.style.fontSize = "25px";

更新

純JavaScript將是：使用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

來源

2014-04-30 22:29:31

問題不在於更改字體大小，問題在於更改相對於當前字體大小的字體大小。我想將當前字體大小增加10％（例如）。我怎麼做？ – rahulthewall

檢查更新 –

感謝您的更新。 – rahulthewall

根據當前的大小（根元素）增加javascript中根元素的字體大小

回答

DEMO

相關問題