js如何改变文章的字体大小

最近发现有许多朋友提问：使用js如何改变一篇文章的字体的大小？
小编查阅了相关文章，为大家整理了几个小案例，供大家参考，具体内容如下
效果图：

点击大、小按钮，随时切换字体大小

具体代码：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>使用js如果改变一篇文章字体的大小</title></head> <style type="text/css"> a{ text-decoration:none; color:#0C3}a:hover{ color:#F36} </style><body><script>function changesize（size） { document.getElementById（"article_content"）.style.fontSize =size+"px"; } </script><div id="article_content">脚本之家<br/>脚本之家欢迎您<p>好好学习 天天向上</div><a href="javascript:changesize（"20"）">大</a> <a href="javascript:changesize（"12"）">小</a></body></html>

再为大家分享一栗子：
这个工作原理很简单，就是在触发事件的时候将文章的字号改变，更直白一些就是改变font-size这个属性的值（jQuery版本1.7.2）
HTML

<div class="box"><div class="ctrl"><a href="javascript:;">放大</a><a href="javascript:;">缩小</a><a href="javascript:;">默认</a></div><div class="cont">这里是一些文字</div></div>

CSS

.box{text-align:center;}.ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}.ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}.ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}.cont{padding-top:50px;font-size:14px;}

$（function（）{function sizeIn（）{var sizeCont = parseInt（$（".cont"）.css（"fontSize"））; // 获取原设定的font-size的值if（sizeCont == 30）{ // 判断font-size增大到30像素时停止$（".cont"）.css（{fontSize:sizeCont}）;}else{$（".cont"）.css（{fontSize:sizeCont + 1}）;}}function sizeOut（）{var sizeCont = parseInt（$（".cont"）.css（"fontSize"））;if（sizeCont == 10）{ // 判断font-size减小到10像素时停止$（".cont"）.css（{fontSize:sizeCont}）;}else{$（".cont"）.css（{fontSize:sizeCont - 1}）;}}function sizeDefault（）{$（".cont"）.css（{fontSize:""}）}$（".ctrl a"）.click（function（）{if（$（this）.index（） == 0）{sizeIn（）;}else if（$（this）.index（） == 1）{sizeOut（）;}else{sizeDefault（）;}}）}）;

希望本文所述对大家学习javascript程序设计有所帮助。