小示例：点击按钮实现字体的放大、缩小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击按钮实现字体大小的控制</title>
<script src=jquery.js></script>
<style>
.msg{
border :2px solid green
}
.color{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class = msg>
<div class = msg-caption>
<span class = bigger style = "background:pink;border:2px solid">放大</span>
<span class = smaller style = "background:pink;border:2px solid">缩小</span>
</div><br>
<div style="border:2px solid blue">
<p id = "para">
hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~
</p>
</div>
</div>
</body>
<script>
$(function(){
$("span").click(function(){
var size = $("#para").css("font-size");//第一步 获取文本框中字体大小，返回16px
var fontsize = parseInt(size,10)//转换为十进制 返回16
var px = size.slice(-2);//回去16px倒数第二个位置开始的子字符串 px,以备后面用
var which = $(this).attr("class");//获取到当前点击元素的class属性用来判断点击了哪个
if(which == "bigger"){
fontsize += 2;
$("#para").addClass("color");
}else if(which == "smaller"){
fontsize -= 2;
$("#para").removeClass("color");
}
$("#para").css("font-size",fontsize+px);
})
})
</script>
</html>
