增加/减少页面上所有元素字体大小的有效方法

Question

为了改善用户体验，我计划在我网站的所有页面（A-、A、A+）上安装一个字体大小增加/减少/重置工具

我面临的问题是页面上不同元素使用的字体大小不统一。有些是14px，有些是18px，有些是12px，有些是15px。

因此，使用body 标签来操作字体大小不会得到想要的结果。

是否有一种解决方案可以遍历每个元素（获取其当前大小）并在单击 A+ 时将其字体大小增加 1 或在单击 A- 时将大小减小 1 并重置为原始大小如果A被点击了？

PS：我也对 jQuery 解决方案持开放态度。

Answer 1

这就是为什么发明了em 和rem 单位而不是px。 rem 指的是根字体大小，这使得使用body{ font-size : 120% }; 增加和减少整个文档的字体大小变得超级容易

但是，由于你不能使用rem，这里有一个使用 jQuery 的肮脏解决方案：

var $affectedElements = $("p"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p style="font-size : 30px">This text is initially 30px</p>
  <div>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>

Answer 2

您最好和最干净的选择是将rem 与 jQuery 混合使用。

我的答案与上述答案/您所要求的答案之间的区别在于，不是将 all 的字体大小增加/减少 1，这只会更改根字体-大小，这将级联并相应地使所有其他字体缩放。

$('#_biggify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)+1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_smallify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)-1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_reset').on('click', function() {
  $('html').css('font-size', '32px')
})

html {
  font-size: 32px;
}

.smaller {
  font-size: 0.5rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Here is a regular piece of text in your document
</div>

<div class="smaller">
Here is text that should be smaller than the rest
</div>

<button id="_biggify">
Make Bigger
</button>

<button id="_smallify">
Make Smaller
</button>

<button id="_reset">
Make Default
</button>

这是一个 JSFiddle：https://jsfiddle.net/Hybridx24/L3yzuvjr/