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

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>