直接用LocalStorage存CSS变量不可行,因其仅支持字符串存储;正确做法是将颜色值(如#4a90e2)存入LocalStorage,再通过JavaScript读取并用document.documentElement.style.setProperty()动态注入:root,实现主题色持久化与实时生效,同时需加try-catch容错及CSS默认值兜底。
直接用 LocalStorage 存 CSS 变量本身不可行,因为 LocalStorage 只能存字符串,而 CSS 变量(如
)是运行时生效的样式机制。真正可行的做法是:把颜色值(比如
)作为字符串存进 LocalStorage,再用 JavaScript 读取后动态注入到
的 CSS 规则中——这样变量就“活”了,页面也能记住上次选的主题色。
存什么:只存颜色值,不存变量语法
用户选中主题色后,不要试图存
这种字符串。应拆解为语义清晰的键值对,例如:
统一用
前缀,便于批量清理或调试;所有值必须是合法 CSS 颜色字符串(
、
、
等),避免用命名色(如
),否则后续无法参与计算或 JS 读取数值。
怎么读:页面加载时立即注入 :root
不能等 DOM 完全就绪才操作,否则会闪屏。推荐在
内放一段内联脚本,在 HTML 解析阶段就执行:
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
注意用
(即
元素)调用
,比操作
标签更轻量、更可靠,也兼容 Shadow DOM。
怎么切:更新变量 + 同步存储,不跳变
点击换肤按钮时,两个动作必须原子化执行:
先调用
写入新颜色值
再立刻用
更新对应 CSS 变量
不要只改某个元素的
,否则伪类(
)、子组件或 SVG 中的
不会响应;也不要删掉再重写整个
,那样可能触发重排。用
是最直接、零延迟的方式。
兜底与容错:别假设 LocalStorage 总可用
iOS Safari 隐私模式、某些 WebView 或 Strict-Origin-Isolation 环境下,
可能静默失效。安全写法是:
写入前加
读取时判断返回是否为
,而不是直接当字符串用
默认值必须在
中预先声明,确保无 JS 或存储失败时页面仍可读
CSS 里要写:
:root {--primary-color: #4a90e2;--bg-color: #ffffff;--text-color: #333333;}
这样即使 JS 不执行,基础样式也有保障。
--primary-color#4a90e2:root"--primary-color: #4a90e2"localStorage.setItem('theme-primary', '#4a90e2')localStorage.setItem('theme-bg', '#ffffff')localStorage.setItem('theme-text', '#333333')theme-#rrggbbrgb()hsl()bluedocument.documentElementsetProperty()localStorage.setItem()setProperty()style::beforefillsetProperty()localStoragetry { localStorage.setItem(...) } catch (e) { /* fallback to prefers-color-scheme or default */ }null:root