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

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

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

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

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

PS:我也对jQuery解决方案持开放态度.

这就是为什么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 );
    });
}

  
This text is initially 30px
  

    
This text is initially 20px
    
This text is initially 10px
    
  
  


A-
A
A+