怎样利用 JavaScript 控制页面字体样式

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 规则，比遍历每个元素高效得多