在实际的网站建设工作中，经常有一些细节的功能，比如网站的字体有时客户需要放大看，假如网站里面有这样的功能，客户的体验会明显增强，那究如何实现这样的放大减小的功能呢？
今天我们使用js来实现，闲话休提，直接上js代码，具体如下：
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
当然上面的这一段代码要放在script标签中，大体里面的意思是实现放大或是缩小的功能，具体的代码今天在这儿不讲解，我们的目的就是让你立马懂得去实现功能，至于为什么，自己可以去研究研究。
上面是步，接着第二步就是布局好要点击的文字或图片，当用户点击这个“放大字体”或是“减小字体”的字样的时候，触动js代码，让某段文字或区域的字体加大或减小，第二步代码就很随意了，每个网站都是不一样的，只要记得链接的地址就行。
<table width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<a href="javascript:ts('td01',1)">+ 放大字体</a>
<a href="javascript:ts('td01',-1)">- 减小字体</a>
</td>
</tr>
</table>
关于上面代码，只要记住放大链接的是：javascript:ts('td01',1)，然后减小链接的是：javascript:ts('td01',-1)。
好了，再下面第三步要考虑的就是点击放大减小字体后，让哪个区域div或class或id的文字字体发生变化，只需要在某段文字外面加个id，也就是说，在body里面，可以放些诸如id="td01"这样的：
<div id="td01">这里面放置的是要改变字体大小的文字</div>
总结一下，上面分为三步，步，要将js代码放入script标签中，可以放在head文件中，也可以放入body中。
第二步，放置待点击放大缩小的文字或图片字样，各个网站情况不一样，只需记得放大缩小的两个链接，即javascript:ts('td01',1)与javascript:ts('td01',-1)。
第三步，在body中，把要放大缩小的文字放在id为td01的div或table中。
就这样简单，放大或减小字体的功能实现，懂了吗，希望会帮助到大家。
