适时改变网页字体大小,jQuery版

JS or jQuery, 转自点点 12 年前 回复

, , ,

啥都不说了。。看代码!

<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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)