一键换肤功能
使用css3的css变量来实现
示例:
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一键换肤</title><style>:root {--primary-color: #ff0000;}.div {width: 500px;color: var(--primary-color);}</style>
</head>
<body><div><h4>选择皮肤颜色:</h4><input type="color" id="color"><button id="btn">确定换肤</button></div><div><br /><br /><br /><div class="div">CSS变量是CSS3中新增的一种属性,可以让我们定义一个变量,在页面中使用,从而可以实现CSS的一键换肤功能。具体实现的方式是,在CSS中定义一个全局变量,在页面中使用这个变量,当用户切换换肤时,只需要改变这个变量的值,就可以实现换肤的效果。</div></div>
</body>
<script>document.getElementById("btn").onclick = () => {const color = document.getElementById("color").value;console.log('color', color);document.documentElement.style.setProperty('--primary-color', color);}
</script>
</html>
相关文章:

一键换肤功能
使用css3的css变量来实现 示例: 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&qu…...

Oracle SQL 注入上的 Django GIS 函数和聚合漏洞 (CVE-2020-9402)
漏洞描述 Django 于2020年3 月4日发布了一个安全更新,修复了 GIS 函数和聚合中的 SQL 注入漏洞。 参考链接: Django security releases issued: 3.0.4, 2.2.11, and 1.11.29 | Weblog | Django 该漏洞要求开发者使用 JSONField/HStoreField;此外&…...
MYSQL 排序和分组怎么做?
文章目录 前言MySQL 排序语法在命令提示符中使用 ORDER BY 子句在PHP脚本中使用 ORDER BY 子句 MySQL 分组GROUP BY 语法实例演示使用 WITH ROLLUP 后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:Mysql 🐱👓博…...

ESP32 ESP-IDF5.1 在Visual Studio Code中自定义分区表与调整Flash大小
好记心不如烂笔头 使用ESP-IDF开发ESP32的时候,要是同时用到蓝牙和WIFI的话,很多时候会提示Flash不够, 我是照着这样解决的,存档记录 来源 : zaixingxing2539 大佬的 ESP32 ESP-IDF5.0 在VSCODE中自定义分区表 用Visual Studio Code自定义分区表 # ESP-IDF Partition Table…...

【Amazon】通过代理连接的方式导入 AWS EKS集群至KubeSphere主容器平台
文章目录 一、设置主集群方式一:使用 Web 控制台方式二:使用 Kubectl命令 二、在主集群中设置代理服务地址方式一:使用 Web 控制台方式二:使用 Kubectl命令 三、登录控制台验证四、准备成员集群方式一:使用 Web 控制台…...

网络爬虫(Python:Selenium、Scrapy框架;爬虫与反爬虫笔记)
网络爬虫(Python:Selenium、Scrapy框架;爬虫与反爬虫笔记) SeleniumWebDriver 对象提供的相关方法定位元素ActionChains的基本使用selenium显示等待和隐式等待显示等待隐式等待 Scrapy(异步网络爬虫框架)Sc…...
一个简易计算器实现(c语言)
该程序使用c语言实现了一个简易的计算器,该计算器具有以下功能: 1、设计功能选择界面,实现菜单选择、数据输入和输出的功能; 2、至少自定义五个子函数分别完成加、减、乘、除以及求模运算功能; 3、考虑代码的健壮性和…...

JVM——垃圾回收算法(垃圾回收算法评价标准,四种垃圾回收算法)
目录 1.垃圾回收算法发展简介2.垃圾回收算法的评价标准1.吞吐量2.最大暂停时间3.堆使用效率 3.垃圾回收算法01-标记清除算法垃圾回收算法-标记清除算法的优缺点 4.垃圾回收算法02-复制算法垃圾回收算法-复制算法的优缺点 5.垃圾回收算法03-标记整理算法标记整理算法的优缺点 6.…...

【虚拟机】在VM中安装 CentOS 7
1.2.创建虚拟机 Centos7是比较常用的一个Linux发行版本,在国内的使用比例还是比较高的。 大家首先要下载一个Centos7的iso文件,我在资料中给大家准备了一个mini的版本,体积不到1G,推荐大家使用: 我们在VMware《主页》…...
Qt 信号与槽简介
Qt是一个跨平台的C应用程序开发框架,它提供了丰富的功能和工具来帮助开发者构建高质量、高性能的GUI应用程序。在Qt中,信号与槽(Signal and Slot)机制是一种用于处理事件的重要特性。 信号(Signal)…...

ruoyi-plus-vue docker 部署
本文以 ruoyi-vue-plus 5.x docker 部署为基础 安装虚拟机 部署文档 安装docker 安装docker 安装docker-compose 配置idea环境 上传 /doicker 文件夹 到服务器;赋值 777权限 chmod -R 777 /docker idea构建 jar 包 利用 idea 构建镜像; 创建基础服务 docker…...

springboot使用redis缓存乱码(key或者 value 乱码)一招解决
如果查看redis中的值是这样 创建一个配置类就可以解决 package com.deka.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; i…...

rk3588配置uac功能,android13使能uac及adb的复合设备
最近,因新增需求需要在现有产品上增加UAC的功能,查阅并学习相关知识后,在rk3588 SOC硬件平台搭载android13系统平台上成功配置了uac及uac&adb的复合设备。基于开源共享精神希望给大家提供些参考。 1.技术可行性预研 (1&#…...

对未来新能源车测试工具的看法
汽车行业正在经历变革的说法算是比较轻描淡写的了,还记得我1983年加入这个行业时,行业聚焦点是引入发动机管理系统。当时还是以家庭掀背车为主的时代,发动机分析仪的体积像衣柜一样大,还没出现“CAN”通信协议。现在经常听到我的导…...

案例说法:智能网联车背后的安全隐患
随着汽车智能化、网联化的发展,汽车数据处理能力日益增强,未经授权对个人信息和重要数据采集、利用等数据安全问题逐步凸显。对车辆网络攻击、网络侵入等网络安全问题恐将危及个人生命安全、合法权益,甚至危害公共利益、国家安全,…...

基于C#实现双端队列
话说有很多数据结构都在玩组合拳,比如说:块状链表,块状数组,当然还有本篇的双端队列,是的,它就是栈和队列的组合体。 一、概念 我们知道普通队列是限制级的一端进,另一端出的 FIFO 形式&#…...

蓝桥杯物联网竞赛_STM32L071_4_按键控制
原理图: 当按键S1按下PC14接GND,为低电平 CubMX配置: Keil配置: main函数: while (1){/* USER CODE END WHILE */OLED_ShowString(24, 0, "<KeyCheck>", 16);if(Function_KEY_S1Check() 1){ OLED_ShowString(…...

【后端卷前端】
为啥现在对后端要求这么高?为啥不要求前端会后端呢? 可能是后端人太多了,要求后端需要会前端的框架(vue react angular ), 这不我为了适应市场的需求来系统的学习vue了: 生成一个基础的vue项目 创建vue项目 vue create projectname 创建vitevue npm init vitelatest p…...

二叉树题目:结点与其祖先之间的最大差值
文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题:结点与其祖先之间的最大差值 出处:1026. 结点与其祖先之间的最大差值 难度 5 级 题目描述 要求 给…...

平衡树 - splay
相比于之前的普通平衡树进行左旋右旋来比,splay的适用性更高,使用更广泛。 核心函数rotate、splay函数,其它的根据需要进行修改。 int n, m; struct Node {int s[2], p, v, cnt; // 左右儿子、父节点、值、出现数量int size, flag; // 子树大…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...

蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...