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

如果您在CSS上使用em单位，并且可以使用Jquery，则此解决方案可行。

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

$(document).ready(function(){
    var fontSize = parseInt($('body').css('font-size'),10);
    $('.inc').on('click',function(){
        fontSize+=0.5;
        $('body').css('font-size',fontSize+'px');
    })
    $('.dec').on('click',function(){
        fontSize-=0.5;
        $('body').css('font-size',fontSize+'px');
    })
})

body {
    font-size:12px;
    padding-top:20px;
}
.tit {
    font-size:3em;
}
.sub {
    font-size:2em;
}
.cont {
    font-size:1em;
}
.button {
    position:absolute;
    top:0;
    font-size:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tit">Main Title</div>
<div class="sub">Subtitle</div>
<div class="cont">Contents</div>
<div class="button">
    <a class="inc" href="#">Increase</a>
    <a class="dec" href="#">Decrease</a>
</div>

Answer 2

您需要定位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";
}

轻松更改整个html文档的FontSize

问题

2 个答案: