啥都不说了。。看代码!
<div class="msg"> <div class="msg_caption"> <button type="button" class="bigger">放大</button> <button type="button" class="smaller">缩小</button> </div> <div> <p class="para" > “On an evening in the latter part of May a middle-aged man was walking homeward from Shaston to the village of Marlott, in the adjoining Vale of Blakemore, or Blackmoor. The pair of legs that carried him were rickety, and there was a bias in his gait which inclined him somewhat to the left of a straight line. He occasionally gave a smart nod, as if in confirmation of some opinion, though he was not thinking of anything in particular. An empty egg-basket was slung upon his arm, the nap of his hat was ruffled, a patch being quite worn away at its brim where his thumb came in taking it off. Presently he was met by an elderly parson astride on a gray mare, who, as he rode, hummed a wandering tune.” </p> </div> </div> <script> $(function(){ $("button").click(function(){ var fontSize = $(".para").css("font-size"); //获取字体大小 var textFontSize = parseInt(fontSize); //去掉单位 var unit = fontSize.slice(-2); //获取单位 var btn = $(this).attr("class"); //获取button的属性值 if(btn == "bigger"){ if(textFontSize <= 30){ //判断最大字体 textFontSize += 2; } } else if(btn == "smaller"){ if(textFontSize >= 14){ //判断最小字体 textFontSize -= 2; } } $(".para").css("font-size",textFontSize + unit); }); }) </script>
原文链接:https://blog.csdn.net/julylyna/article/details/7771604
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:适时改变网页字体大小,jQuery版
本文地址:适时改变网页字体大小,jQuery版
发表评论