当前位置： 首页 > news >正文

一键换肤功能

news 2026/4/8 13:05:39

使用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变量来实现 示例&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&qu…...

编程日记 2023/11/27 20:10:07

Oracle SQL 注入上的 Django GIS 函数和聚合漏洞 （CVE-2020-9402）

漏洞描述 Django 于2020年3 月4日发布了一个安全更新&#xff0c;修复了 GIS 函数和聚合中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 3.0.4, 2.2.11, and 1.11.29 | Weblog | Django 该漏洞要求开发者使用 JSONField/HStoreField;此外&…...

编程日记 2023/11/27 20:09:06

MYSQL 排序和分组怎么做？

文章目录 前言MySQL 排序语法在命令提示符中使用 ORDER BY 子句在PHP脚本中使用 ORDER BY 子句 MySQL 分组GROUP BY 语法实例演示使用 WITH ROLLUP 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博…...

编程日记 2023/11/27 20:08:05

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…...

编程日记 2023/11/27 20:07:04

【Amazon】通过代理连接的方式导入 AWS EKS集群至KubeSphere主容器平台

文章目录 一、设置主集群方式一&#xff1a;使用 Web 控制台方式二&#xff1a;使用 Kubectl命令 二、在主集群中设置代理服务地址方式一&#xff1a;使用 Web 控制台方式二&#xff1a;使用 Kubectl命令 三、登录控制台验证四、准备成员集群方式一&#xff1a;使用 Web 控制台…...

编程日记 2023/11/27 20:06:03

网络爬虫（Python：Selenium、Scrapy框架；爬虫与反爬虫笔记）

网络爬虫&#xff08;Python&#xff1a;Selenium、Scrapy框架&#xff1b;爬虫与反爬虫笔记&#xff09; SeleniumWebDriver 对象提供的相关方法定位元素ActionChains的基本使用selenium显示等待和隐式等待显示等待隐式等待 Scrapy&#xff08;异步网络爬虫框架&#xff09;Sc…...

编程日记 2023/11/27 20:05:02

一个简易计算器实现(c语言)

该程序使用c语言实现了一个简易的计算器&#xff0c;该计算器具有以下功能&#xff1a; 1、设计功能选择界面&#xff0c;实现菜单选择、数据输入和输出的功能&#xff1b; 2、至少自定义五个子函数分别完成加、减、乘、除以及求模运算功能&#xff1b; 3、考虑代码的健壮性和…...

编程日记 2023/11/27 20:04:00

JVM——垃圾回收算法（垃圾回收算法评价标准，四种垃圾回收算法）

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

编程日记 2023/11/27 20:03:00

【虚拟机】在VM中安装 CentOS 7

1.2.创建虚拟机 Centos7是比较常用的一个Linux发行版本&#xff0c;在国内的使用比例还是比较高的。 大家首先要下载一个Centos7的iso文件&#xff0c;我在资料中给大家准备了一个mini的版本&#xff0c;体积不到1G&#xff0c;推荐大家使用&#xff1a; 我们在VMware《主页》…...

编程日记 2023/11/27 19:58:56

Qt 信号与槽简介

Qt是一个跨平台的C应用程序开发框架&#xff0c;它提供了丰富的功能和工具来帮助开发者构建高质量、高性能的GUI应用程序。在Qt中&#xff0c;信号与槽&#xff08;Signal and Slot&#xff09;机制是一种用于处理事件的重要特性。 信号&#xff08;Signal&#xff09;&#xf…...

编程日记 2023/11/27 19:57:54

ruoyi-plus-vue docker 部署

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

编程日记 2023/11/27 19:56:53

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…...

编程日记 2023/11/27 19:55:52

rk3588配置uac功能，android13使能uac及adb的复合设备

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

编程日记 2023/11/27 19:54:51

对未来新能源车测试工具的看法

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

编程日记 2023/11/27 19:53:50

案例说法：智能网联车背后的安全隐患

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

编程日记 2023/11/27 19:52:48

基于C#实现双端队列

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

编程日记 2023/11/27 19:51:46

蓝桥杯物联网竞赛_STM32L071_4_按键控制

原理图&#xff1a; 当按键S1按下PC14接GND&#xff0c;为低电平 CubMX配置: Keil配置&#xff1a; main函数&#xff1a; while (1){/* USER CODE END WHILE */OLED_ShowString(24, 0, "<KeyCheck>", 16);if(Function_KEY_S1Check() 1){ OLED_ShowString(…...

编程日记 2023/11/27 19:50:45

【后端卷前端】

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

编程日记 2023/11/27 19:48:43

二叉树题目：结点与其祖先之间的最大差值

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

编程日记 2023/11/27 19:47:42

平衡树 - splay

相比于之前的普通平衡树进行左旋右旋来比&#xff0c;splay的适用性更高&#xff0c;使用更广泛。 核心函数rotate、splay函数&#xff0c;其它的根据需要进行修改。 int n, m; struct Node {int s[2], p, v, cnt; // 左右儿子、父节点、值、出现数量int size, flag; // 子树大…...

编程日记 2023/11/27 19:46:40

收藏！小白程序员轻松入门大模型，掌握AI领导力升职加薪必备

AI正颠覆全行业&#xff0c;要求原地升级AI。程序员需从执行者转变成AI领导者&#xff0c;提升AI领导力。未来行业可能两头重&#xff08;小白AI和架构师AI&#xff09;&#xff0c;初中级工程师需提升专业能力和AI领导力。文章推荐NLP、CV、大模型算法、大模型部署等方向&…...

编程新知 2026/4/8 13:01:06

终极Windows内存优化指南：用Mem Reduct告别系统卡顿的完整解决方案

终极Windows内存优化指南&#xff1a;用Mem Reduct告别系统卡顿的完整解决方案 【免费下载链接】memreduct Lightweight real-time memory management application to monitor and clean system memory on your computer. 项目地址: https://gitcode.com/gh_mirrors/me/memre…...

编程新知 2026/4/8 12:08:08

基于Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型单变量时序预测一键对比

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f447; 关注我领取海量matlab电子书和数学建模资料&#x1f34a;个人信条&#xff1a;格物致知,完整Matl…...

编程新知 2026/4/8 11:51:57

Python实战：单细胞转录因子分析全流程解析

1. 单细胞转录因子分析入门指南 单细胞转录因子分析是近年来单细胞测序领域的热门方向&#xff0c;它能帮助我们从海量单细胞数据中挖掘调控细胞命运的关键转录因子。想象一下&#xff0c;这就像是在茫茫人海中找到那些真正影响群体行为的关键人物。传统方法需要复杂的生物信息…...

编程新知 2026/4/8 11:41:50

四柱排盘免费软件怎么选？天府Agent好用吗

在数字化渗透到传统文化领域的今天&#xff0c;命理分析早已告别了手工排盘、纸笔记录的传统模式&#xff0c;各类专业排盘工具层出不穷&#xff0c;很多命理爱好者都在找好用的四柱排盘免费软件&#xff0c;今天就从实际使用体验出发&#xff0c;整理市面上常见工具的特点&…...

编程新知 2026/4/8 10:34:02

突破式4大技术实现99%硬字幕提取准确率：video-subtitle-extractor全解析

突破式4大技术实现99%硬字幕提取准确率&#xff1a;video-subtitle-extractor全解析 【免费下载链接】video-subtitle-extractor 视频硬字幕提取&#xff0c;生成srt文件。无需申请第三方API&#xff0c;本地实现文本识别。基于深度学习的视频字幕提取框架&#xff0c;包含字幕…...

编程新知 2026/4/8 9:52:34

OFA-VE效果集：天文星图与观测记录文本逻辑一致性AI核查

OFA-VE效果集&#xff1a;天文星图与观测记录文本逻辑一致性AI核查 1. 引言&#xff1a;当AI遇见星空 想象一下&#xff0c;你是一位天文爱好者&#xff0c;或者是一位科研工作者。你手头有一张刚刚拍摄的深空星图&#xff0c;旁边还附带着一段观测记录的文字描述。你可能会问…...

编程新知 2026/4/8 9:46:10

本地连接MySql数据库报错？？

提示&#xff1a; idea本地连接数据库&#xff0c;然后Failed Copy Search Error Troubleshooting DBMS: MySQL (no ver.) Case sensitivity: plainmixed, delimitedexact Communications link failure The last packet sent successfully to the server was 0 millisec…...

编程新知 2026/4/8 8:16:32

OpenTSDB数据模型设计终极指南：掌握时间序列数据的最佳实践和常见模式

OpenTSDB数据模型设计终极指南&#xff1a;掌握时间序列数据的最佳实践和常见模式 【免费下载链接】opentsdb A scalable, distributed Time Series Database. 项目地址: https://gitcode.com/gh_mirrors/op/opentsdb OpenTSDB作为一款可扩展的分布式时间序列数据库&…...

编程新知 2026/4/8 7:40:05

OpenTiny NEXT 从入门到精通·第 1 篇

OpenTiny NEXT 从入门到精通第 1 篇&#xff1a;启程篇——初识 OpenTiny NEXT&#xff0c;开启企业级智能前端之旅前端技术日新月异&#xff0c;Vue 2 要停止维护了&#xff0c;团队还在 Vue 2/3 多版本并存中挣扎&#xff1b;业务方希望接入 AI&#xff0c;前端却不知道怎么开…...

编程新知 2026/4/8 6:59:10