JavaScript 改变网页字体大小的三种常用方法
作者：小圆点时间：2026-10-23 19:19:07浏览：556
本文介绍了三种使用 JavaScript 改变网页字体大小的方法。第一种通过指定 ID 控制正文字体，提供大中小三种尺寸选择；第二种直接修改 body 整体样式，适用于全局调整；第三种仅包含增加和减小功能，逻辑简洁且实用。开发者可根据实际需求选择合适的方案，并注意引入外部 JS 后刷新页面以生效。
指定ID控制正文字体大小
第一种实现方式：该方案提供大、中、小三种字体尺寸选项，用于控制正文部分的显示大小。实现时通常需要为目标元素指定唯一的 ID 以便进行样式切换。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <htmL> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <style> #content {font-size:12px; line-height:200%; padding:10px; } </style> <body> <div>字体: 小中大</div> <div id="content"> 本站 www.jb51.net 欢迎大家的光临。 </div> </body> </htmL>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
全局修改Body字体样式
第二种实现方式：此方法使用频率相对较低，但在特定场景下具有价值。它直接设置 body 标签内的所有元素大小，而非仅控制正文区域。相比第一种仅针对特定 ID 的方案，这种全局设置方式覆盖范围更广。用户可根据具体需求进行选择，建议在实际应用中多进行兼容性测试。
<style> .tabfont{font-size:12px} </style> <body> + 放大字体 | + 减小字体 本站 www.jb51.net 这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。 </body> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
简洁的增减字体功能实现
第三种实现方式：该方案仅提供增加和减小两种操作，功能相对精简，但非常实用。目前本站采用的即为这种简洁高效的实现方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <htmL> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <style> #content {font-size:12px; line-height:200%; padding:10px; } </style> <body> 字体：[增加 减小] <div id="art_content"> 本站 测试文本代码 </div> </body> </htmL>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部：scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09