<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>
jQuery控制网页字体大小
最新推荐文章于 2024-07-21 02:48:57 发布