HTML5中LocalStorage存储动态CSS变量实现换肤

可实现主题色持久化与动态应用,需用JavaScript将颜色值存入LocalStorage并动态注入CSS变量到:root中,页面加载时读取、切换时更新,注意默认值、错误处理及命名规范。可以实现,但需注意LocalStorage只能存字符串,CSS变量本身不支持直接存储,需通过JavaScript动态写入样式表或设置元素style属性来应用。保存主题色到LocalStorage用户选择主题后,把对应的颜色值(如主色、文字色)以键值对形式存入LocalStorage:localStorage.setItem('theme-primary', '#4a90e2') localStorage.setItem('theme-text', '#333') 建议统一用theme-xxx前缀,便于管理与清除页面加载时读取并注入CSS变量在<head>中插入一个<style id="dynamic-theme">标签,JS读取LocalStorage后生成:root规则:const primary = localStorage.getItem('theme-primary') || '#4a90e2';const text = localStorage.getItem('theme-text') || '#333';document.getElementById('dynamic-theme').textContent = `:root { --primary-color: {primary}; --text-color: {text}; }`;后续CSS中即可使用color: var(--text-color)等语法,实时响应变化。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手,依托大模型,帮助用户记录、整理和分析音视频内容,体验用大模型做音视频笔记、整理会议记录。

相关推荐
A-刘晨阳5 小时前
AI原生时序数据库选型指南:从数据存储到智能决策的范式跃迁
数据库·时序数据库·ai-native
HalvmånEver6 小时前
MySQL的增删改查命令合集合集
数据库·sql·oracle
不剪发的Tony老师7 小时前
dblab:一款基于终端的交互式数据库客户端
数据库·sql
YJlio7 小时前
7.4.5 Windows 11 企业网络连接与网络重置实战:远程访问、本地策略与故障恢复
前端·chrome·windows·python·edge·机器人·django
深耕AI7 小时前
【VS Code避坑指南】点击Python图标提示“没有Python环境”,选择安装uv后这堆输出到底是什么意思?
开发语言·python·uv
第一程序员7 小时前
Rust生命周期管理实战指南:从困惑到掌握
python·github
程序员威哥7 小时前
实战!Python爬京东商品评论:从采集到情感分析+词云可视化,新手30分钟跑通
开发语言·爬虫·python·scrapy
风噪7 小时前
centos7 python3.13全套安装(可用于离线复制)
python
xwz小王子7 小时前
Science Robotics基础模型正在改写机器人集群的“游戏规则”
数据库·人工智能·机器人
茉莉玫瑰花茶8 小时前
LangGraph 介绍
服务器·网络·数据库