javascript - 更改整个 html 文档的 FontSize 的简单方法

Question

是否有任何标准方法来更改整个 HTML 文档的字体大小？

我在考虑两个按钮，一个增加字体大小，另一个减少字体大小。这两个按钮都调用一个 JavaScript 函数；

function increaseFontSize(){
//Increase the font size for the whole document
}

function decreaseFontSize(){
//Decrease the font size for the whole document
}

问题

我该怎么做？有没有比我上面说的更简单的方法？

编辑

我正在使用 Bootstrap ，每个 HTML 元素都有自己的 CSS。 Bootstrap 将默认(正文)字体大小定义为 14px。

Answer 1

您需要针对 HTML 元素的 font-size 样式。您必须确保存在初始值，以便您可以轻松修改它。

您可以通过以下方式进行:

document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "10px"

剩下要做的就是实现值的增量:

function increaseFontSize(){
    var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
    var int_value = parseInt( existing_size.replace( "px", "" );
    int_value += 10;
    document.getElementsByTagName( "html" )[0].style[ "font-size" ] = int_value + "px";
}

我建议使用一些辅助函数来清理这段代码:

function extract_current_size(){
  var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
  return parseInt( existing_size.replace( "px", "" );
}

function increaseFontSize(){
  var existing_value = extract_current_size()
  existing_value += 10;
  document.getElementsByTagName( "html" )[0].style[ "font-size" ] = existing_value + "px";
}