为文章页增加内容字号大中小选择的功能

浏览其他博主博客的时候，余斗会看到不少博客文章页都有一个提供文章字体增大缩小的按钮，用来调节文章字体的大小，用户体验不错。最近抽空研究了一下这个功能的实现方法，只需要一段js代码就能实现，接下来，余斗就告诉大家怎么来操作。

具体方法如下：

一、把以下代码放到内容页模板的<head></head>标签之间：

<script Language=”JavaScript”>function FontZoom(fsize){var ctext = document.getElementById(“content”);ctext.style.fontSize = fsize +”px”;}</script>
 

二、在需要显示字体大小选择的地方放上以下代码：

<small>字体：</small> [<a href=’javascript:FontZoom(16)’>大</a> <a href=’javascript:FontZoom(14)’>中</a> <a href=’javascript:FontZoom(12)’>小</a>]
 

三、把内容页模板调用文章内容的标签外面的div加上一个id=”content”，如下：

余斗在自己的文章页模版中的

<div class="content">
 

改为

<div class="content" id="content">
 

修改完成后生成文章即可，大家可以预览下我的文章页标题下面的文章信息，点击下大、中、小来分别看下效果，对网页的加载速度几乎没有影响。

资源均来自第三方，谨慎下载，前往第三方网站下载