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是一个肮脏的解决方案：

＆＃13;

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 );
    });
}

＆＃13;

<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>

＆＃13;

Answer 2

你最好和最干净的赌注是使用混合了jQuery的rem。

我的答案与您上面提到的答案之间的区别在于，不是将字体大小的所有增加/减少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/

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

2 个答案: