JAVA实现字体扩大代码_[Java教程]jQuery实现设置字体大小代码实例

[Java教程]jQuery实现设置字体大小代码实例

0 2016-01-19 00:00:12

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)，设置字体大小。

二.相关阅读:

1.click事件可以参阅jQuery的click事件一章节。

2.css()函数可以参阅jQuery的css()方法一章节。

3.parseFloat()函数可以参阅javascript的parseFloat()方法一章节。

4.slice()函数可以参阅javascript的String对象的slice()方法一章节。

5.attr()函数可以参阅jQuery的attr()方法一章节。