用document.body.style直接动态修改fontsize和backgroundcolor最轻量，字号须带单位（如"18px"），背景色推荐"#fff"或"transparent"；用localstorage存取实现刷新不丢失，事件绑定需确保dom加载完成且id准确。
怎么用 CSS 实现可切换的字号与背景色控制面板
直接用 document.documentElement.style 或 document.body.style 动态改样式，是最轻量、兼容性最好、新手也能立刻上手的方式。不要一开始就搞 localStorage + class 切换或 CSS 变量全链路，容易卡在「为什么点了没反应」上。
常见错误现象：fontSize 设成 "16"（漏单位）、backgroundColor 写成 "#ffffff" 但元素已有更优先的内联样式或 !important 规则、用 getElementById 但按钮 ID 拼错。
- 字号必须带单位，例如
element.style.fontSize = "18px"，不能是"18" - 背景色推荐用十六进制简写（
"#fff"）或"transparent"，避免 RGB 字符串拼接出错 - 优先作用于
，比改更直观；若页面有固定宽度容器，记得同步调整其lineHeight防止行距塌陷
如何保存用户设置并刷新后不丢失
用 localStorage 存值最稳妥。不是所有浏览器都支持 prefers-color-scheme 媒体查询自动适配，也不能依赖 cookie——它需要服务端配合，而纯静态 HTML 读不到。
使用场景：用户调大字号后关闭页面，下次打开仍保持该字号；夜间模式开关状态需持久化。
- 存的时候用
localStorage.setItem("textSize", "20px")，取的时候用localStorage.getItem("textSize")，注意返回的是字符串，要判空 - 别在页面加载前就读取并设样式，否则可能被后续 CSS 覆盖；建议在
DOMContentLoaded后执行初始化逻辑 - 如果同时存多个设置（字号+背景+行高），不要拼 JSON 字符串手动解析，直接用多个 key，比如
"bgTheme"和"lineHeight"
按钮点击没反应？检查这三处 DOM 绑定细节
90% 的「设置面板失灵」问题出在事件绑定环节，而不是 CSS 或逻辑本身。
错误现象：Uncaught TypeError: Cannot read property 'addEventListener' of null —— 说明 JS 执行时按钮还没加载出来。
- 确保脚本放在
前，或包装在DOMContentLoaded回调里 - 按钮的
id必须和document.getElementById("btn-lg")中的字符串完全一致（区分大小写、无空格） - 不要用
onclick="changeSize(24)"写在 HTML 里——调试困难、无法统一管理、容易和 JS 里的 addEventListener 冲突
移动端适配字号时，为什么 rem 不如 px 直观
新手用 rem 想实现响应式缩放，结果发现按钮变大了但文字没变，或者 iOS Safari 上字体强制放大导致布局错乱。这不是 bug，是浏览器对可读性策略的干预。
性能与兼容性影响：iOS 默认会将小于 16px 的字号强制拉到 16px，且不触发 text-size-adjust: none（已被大多数浏览器弃用）；Android Chrome 对 rem 基准的重算也较慢。
- 阅读器场景下，用户明确要「更大/更小」，就用
px直设font-size，避免间接计算 - 若真要用相对单位，改
html { font-size: 18px }并用 JS 动态改这个根字号，比每个元素算 rem 更可控 - 务必加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则某些安卓机缩放逻辑异常
真正难的不是写几个按钮，而是让用户调完字号后，段落不会挤成一团、图片不会错位、按钮文字不会被截断——这些都要在改 fontSize 后连带检查 padding、max-width 和 word-break。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
