怎样利用 JavaScript 控制页面字体样式
作者：袖梨
2026-07-13
JavaScript控制字体样式核心是操作DOM元素style对象或切换CSS类，不修改CSS文件而实时影响内联样式；直接改style属性适合单点即时调整，需驼峰命名和带单位；classList切换类更推荐，利于复用与动画；还可实现响应式动态调整。
JavaScript 控制页面字体样式，核心是操作 DOM 元素的 style 对象或切换预设 CSS 类。它不直接改写 CSS 文件，而是实时影响元素的内联样式，响应快、灵活性强，适合交互驱动的视觉变化。
直接修改 style 属性（适合单点、即时调整）
这是最常用的方式，适用于按钮点击变色、滚动时缩放文字、表单校验标红等场景。注意：CSS 属性名需转为驼峰式，数值必须带单位（0 除外）。
-
改字体类型：
element.style.fontFamily = "Helvetica, sans-serif" -
调字体大小：
element.style.fontSize = "1.25rem"（支持 px、em、rem、% 等） -
换字体颜色：
element.style.color = "#333"或"rgb(51, 51, 51)" -
加粗/斜体/下划线：
element.style.fontWeight = "bold"，element.style.fontStyle = "italic"，element.style.textDecoration = "underline" -
批量设置更简洁：
Object.assign(element.style, { fontSize: "18px", color: "#2c3e50", fontWeight: "600" })
用 classList 切换 CSS 类（推荐日常使用）
把字体样式提前写在 CSS 中，JS 只负责开关类名。这样利于复用、支持过渡动画、避免硬编码样式值，也方便主题切换。
- 定义 CSS 类：
.title-large { font-size: 2rem; font-weight: 700; } - 添加类：
element.classList.add("title-large") - 移除类：
element.classList.remove("title-small") - 切换状态（如点击展开/收起）：
element.classList.toggle("highlighted", isActive) - 检查是否启用：
element.classList.contains("serif-mode")
响应式字体：随滚动或视口变化动态调整
让字体大小根据用户行为或设备环境自适应，提升可读性与体验。
立即学习“Java免费学习笔记（深入）”；
-
随滚动放大标题：
document.addEventListener("scroll", () => { title.style.fontSize = Math.max(24, 24 + window.scrollY / 10) + "px"; }); -
按屏幕宽度分级设置：
if (window.innerWidth -
监听窗口重置：
window.addEventListener("resize", updateFontSize);防止横竖屏切换后样式失效
注意事项与避坑提醒
看似简单，但几个细节常被忽略：
-
style 只读取和设置内联样式，无法获取 CSS 文件中定义的默认值（要用
getComputedStyle(element).fontSize） -
font-size 设为 0 不需要单位，但设为 0.5 或 12 就必须写
"0.5rem"或"12px" -
避免用 innerHTML 拼 style 标签，既不安全也不易维护；也不要手动拼接
className字符串 -
大量元素统一改字体？ 优先用
document.body.classList.add("theme-serif")配合全局 CSS 规则，比遍历每个元素高效得多
