jQuery等比改变文本的属性

效果预览：



jQuery如下：

<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".box .title span").click(function(){
var thisEle = $("#para").css("font-size");
var textFontSize = parseFloat(thisEle , 10);//获取十进制数字
var thisInd = $("#para").css("text-indent");
var textIndent = parseFloat(thisInd , 10);
var unit = thisEle.slice(-2); //从倒数第二位开始，获取单位
var cName = $(this).attr("class");
if(cName == "bigger"){
if( textFontSize <= 14 && textIndent <= 28 ){
textFontSize += 2;
textIndent += 4;
}
}else if(cName == "smaller"){
if( textFontSize >= 14 && textIndent >= 28 ){
textFontSize -= 2;
textIndent -= 4;
}
}
$("#para").css("font-size",  textFontSize + unit);
$("#para").css("text-indent",  textIndent + unit);
});
});
</script>

jQuery中.parseFloat()和.slice()方法的使用：

.parseFloat()方法的使用：parseFloat()函数会在一个字符串从左到右地查找一个浮点（十进制）数。例如，它会将字符串12转成数字12另外，它还会去掉末尾的非数字字符，比如12px就变成了12.如果字符串本身以一个非数字开头，那么parseFloat()会返回NaN，即Not a Number（非数字）。函数的第二个参数用以确保将这个数译码为十进制数，而不是八进制或其他表达法。

.slice()方法的使用：slice()函数返回字符串中从指定的字符开始的一个字符串。因为这里使用的度量单位（px）是两个字符，所以我们制定子字符串应该从倒数第2个字符开始。

css如下：

<style>
* { margin:0; padding:0; }
.box {width:370px; margin:100px; background-color:#eee;  }
.box .title { width:100%; overflow:hidden;}
.box .title span { display:block; float:right; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; }
.box .con { padding:5px 10px 10px; }
#para { font-size:14px; text-indent:28px; line-height:24px; text-align:justify; }
</style>

html如下：

<div class="box">
<div class="title">
<span class="smaller" >A-</span>
<span class="bigger" >A+</span>
</div>
<div class="con">
<p id="para">
范德萨发多少都是发发啊发得分阿发阿发打发，发打发士大夫打发阿飞发得分发阿发发传单阿发按时发达，发生发的说法是打发的飞洒发大厦啊打发啊都是法师打发的撒发生大发，萨芬大厦阿道夫阿地方撒阿萨德发阿凡达发的撒萨法阿的发达萨法大师傅啊打发。
</p>
</div>
</div>

源码下载链接：http://download.csdn.net/detail/cshuawei/4742436