jQuery控制字体大小

最新推荐文章于 2019-09-17 11:09:38 发布

原创最新推荐文章于 2019-09-17 11:09:38 发布 · 990 阅读

1 ·

CC 4.0 BY-SA版权

JS成品代码同时被 2 个专栏收录

17 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

该博客演示了如何使用jQuery实现点击按钮动态改变文本的字体大小。通过监听`span`元素的点击事件，根据其class（'bigger'或'smaller'）判断是放大还是缩小字体，并确保字体大小在12px到22px之间变化。

 <script type="text/javascript">
$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size"); 
var textFontSize = parseInt(thisEle , 10);
var unit = thisEle.slice(-2); //获取单位
var cName = $(this).attr("class");
if(cName == "bigger"){
  if( textFontSize <= 22 ){
textFontSize += 2;
}
}else if(cName == "smaller"){
  if( textFontSize >= 12  ){
textFontSize -= 2;
}
}
$("#para").css("font-size",  textFontSize + unit);
});
});
  </script>


<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<p id="para">
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text.
</p>
</div>
</div>