<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页字体大小</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
var thisEle=$("#para").css("font-size");
var textfontsize=parseFloat(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>
<style>
.msgcpation span{display:inline-block;width:60px;height:30px;line-height:30px;background:#999;text-align:center;color:#fff;}
#para{font-size:14px;}
</style>
</head>
<body>
<div class="msg">
<div class="msgcpation">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">
dstdgdgdfgdg utut ssdf asdfasfd dstdgdgdfgdg utut ssdf <br/>
asdfasfd dstdgdgdfgdg utut ssdf asdfasfd dstdgdgdfgdg <br/>
utut ssdf asdfasfd
</p>
</div>
</div>
</body>
</html>