jQuery改变内容字体大小

有时候我们浏览一些资讯站的时候会发现有字体增大和缩小的功能。是不是感觉很神奇?这个其实很简单,下面讲解一下具体方法。

首先需要获取到当前内容里字体的大小,使用css()方法$(“#content”).css(“font-size”);然后通过 parseFloat(ziti)来获取字体大小的数值, parseFloat()可以解析一个字符串,并返回该字符串中的第一个数字值,如果第一个字符不是数字则会返回NaN。最后是获取字体大小的单位值 ziti.slice(-2);这里是以像素为单位的。这样就获取到了相对的现在内容的值。接下来就是根据获取的值来改变内容的字体大小了。

<script type=”text/javascript”>

var ziti = $(“#content”).css(“font-size”);
var textFontSize = parseFloat(ziti , 10);
var unit = ziti.slice(-2); //获取单位
if( textFontSize >= 12 ){
textFontSize -= 2;
}
function big(){

$(“#content”).css(“font-size”, textFontSize + unit);
}
function small(){

$(“#content”).css(“font-size”, textFontSize + unit);

}
</script>

上面是两个例子,第一个是增大字体,第二个是减小字体,分别做了一定的限制。

更多代码请关注代码日记本~

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录