更改整个 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

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

您可以通过以下方式进行操作：

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";
}