Javascript 更改整个html文档大小的简单方法

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

我想到了两个按钮，一个增加字体大小，另一个减小字体大小。这两个按钮都调用JavaScript函数

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

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

问题: 我该怎么做？有没有比我上面提到的更简单的方法

编辑

---

我正在使用，它为每个HTML元素提供了自己的CSS。引导将默认（正文）字体大小定义为14px

您需要针对

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

---

一种方法是，如果您在CSS上使用

em

单元，并且可以使用

Jquery

这个解决方案就可以了

可以在主体上设置全局值，然后更改：

$（文档）.ready（函数（）{
var fontSize=parseInt（$（'body'）.css（'font-size'），10）；
$（'inc'）。在（'click'，function（）上{
fontSize+=0.5；
$（'body'）.css（'font-size'，fontSize+'px'）；
})
$（'dec'）。在（'click'，function（）上{
fontSize-=0.5；
$（'body'）.css（'font-size'，fontSize+'px'）；
})
})

正文{
字体大小：12px；
填充顶部：20px；
}
山雀{
字号：3em；
}
.sub{
字号：2em；
}
续{
字号：1em；
}
.按钮{
位置：绝对位置；
排名：0；
字体大小：15px；
}

主标题
字幕
目录

可能会更改

元素或/和

的

字体大小

css样式属性，假设任何其他元素覆盖该属性？有许多元素覆盖该属性，这取决于页面上字体大小的设置方式。更简单的方法？-比哪一个更简单？@ahmad-无效编辑-如何知道正在使用jQuery？如果body元素中没有font-size属性，则无法使用style@Aditya-非常正确。我在回答中加入了这一要求。该值在修改之前必须存在。谢谢你的反馈！这个解决方案看起来很干净。我不知道你是否看到了我的编辑，但我正在使用引导，它附带了一个默认的字体大小值14px。我明天会试用。这个函数似乎不适用新的字体大小。它提取当前字体大小（14）并成功递增。但是没有对字体大小进行任何更改。回答很好，如果body元素在style中没有font size属性，那么它将不起作用？@Aditya将起作用，因为font size有一个默认值。。。。您仍然可以从jquery变量中看到这一点，这看起来非常好。但是，我使用的是引导（检查我的编辑），引导默认的正文字体大小是14px。此外，bootstrap使用某种默认的字体大小值定义每个HTML元素，也使用px。这将如何影响这个解决方案？@Marcus在这里没有任何检查。。。问题是bootstrap中的某些元素具有固定的字体大小，您需要覆盖这些样式并使用它们，但您可以尝试。尽管我感谢您的努力，但这种方法将使我不得不覆盖每个我打算增加/减少字体大小值的元素。现在，@Lix-answer看起来更干净了，我会先试用一下。