本文介绍如何使用JavaScript动态调整文章字体大小。通过原生JS直接修改DOM元素的style.fontSize属性，或利用jQuery库操作CSS样式，实现点击按钮切换大、小字号的功能。文中包含完整的HTML、CSS及JS代码示例，涵盖边界值判断逻辑，适用于需要提升阅读体验的网页场景。
JavaScript动态调整字体大小的实现方案
近期有用户咨询如何利用JavaScript动态调整网页文章的字体大小。
经整理相关技术资料，现提供几个实用案例供参考，详细内容如下。
效果展示如下：
通过点击“大”或“小”按钮，可实时切换文章的显示字号。
实现该功能的代码如下：
原生JavaScript实现方案
<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>
此外，再提供一个基于jQuery的示例：
其核心原理是在触发点击事件时修改元素的font-size属性值（本例使用jQuery 1.7.2版本）。
jQuery实现方案
<div class="box">
<div class="ctrl">
<a href="javascript:;">放大</a>
<a href="javascript:;">缩小</a>
<a href="javascript:;">默认</a>
</div>
<div class="cont">这里是一些文字</div>
</div>
HTML结构部分：
.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;}
CSS样式定义部分：
$(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逻辑部分：