[Java教程]jQuery实现设置字体大小代码实例
jQuery实现设置字体大小代码实例:
设置网页中字体的大小是常见的操作,下面就通过代码实例介绍一下如何实现此功能。
代码如下:
蚂蚁部落
放大 缩小
蚂蚁部落
以上代码实现了我们的要求,可以实现文本内容的放大和缩小效果,下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){}),当文本结构完全加载完毕之后再去执行函数中的代码。
2.$("span").click(function(){}),为span元素注册click事件处理函数。
3.var thisEle=$("#para").css("font-size"),获取id属性值为para元素下文本字体的大小。
4.var textFontSize=parseFloat(thisEle,10),将字体大小转换成数值类型。
5.var unit=thisEle.slice(-2),截取字符串,也就是截取最后两位,也就是单位(px)。
6.var cName=$(this).attr("class"),获取当前点击span元素的class属性值。
7.if(cName=="bigger"){textFontSize+= 2;},如果点击是放大按钮就将字体放大。
8.$("#para").css("font-size", textFontSize+unit),设置字体大小。