jQuery控制字体大小

andrewleeeeee

于 2013-11-22 17:11:07 发布

阅读量977

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery JS成品代码

本文链接：https://blog.youkuaiyun.com/andrewleeeeee/article/details/16887943

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

17 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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>