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

Question

为了改善用户体验,我计划在我的网站的所有页面上使用字体大小增加/减少/重置工具(A-,A,A +)

我面临的问题是页面上不同元素使用的字体大小不均匀.有些是14px,有些是18px,有些是12px,有些是15px.

因此,使用body标记来操作字体大小将无法获得所需的结果.

是否有一个解决方案将遍历每个元素(获取其当前大小)并将其字体大小增加1(如果A+单击)或将大小减小1(如果A-单击)并重置为原点(如果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>