为了改善用户体验,我计划在我网站的所有页面(A-、A、A+)上增加/减少/重置字体大小
我面临的问题是页面上不同元素使用的字体大小不统一。有些是 14px,有些是 18px,有些是 12px,有些是 15px。
因此,使用 body
用于操纵字体大小的标签将不会获得所需的结果。
如果 A+
是否有一个解决方案将遍历每个元素(获取其当前大小)并将其字体大小增加 1如果 A-
被点击或将尺寸减小 1如果 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 );
});
}
<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>
关于javascript - 增加/减少页面上所有元素字体大小的有效方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34656142/