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

【前端demo】动态赋值CSS

news 2026/2/10 12:10:51

文章目录

- 效果
- 过程
- - html实现
  - oninput与onchange事件
  - 统一配置CSS
- 代码
- - HTML
  - CSS
  - JS

其他demo

效果

在这里插入图片描述
动态显示CSS样式，由:root统一配置。

效果预览：https://codepen.io/karshey/pen/BavLrwy

参考：

Dynamic CSS Variables(codepen.io)

漫谈document.documentElement与document.body - 简书 (jianshu.com)

过程

html实现

滑动滑块和滑动border-radius由<input type='range'>实现，选择颜色由<input type='color'>实现

在这里插入图片描述
对于radius，四个角一起变化的最大值是50%。

oninput与onchange事件

oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

该事件类似于 onchange事件。不同之处：oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。

在这里，显然滑块的滑动是不能失去焦点才触发的（滑块滑动的时候box要同步移动），但颜色的选择可以（可以试一试，改变颜色是选择颜色之后再点击空白区域，方块颜色才会发生改变）。

统一配置CSS

我们的目的是实现动态改变box的样式。因此，可以将box的样式统一在root处配置：

/* 统一配置box的样式 */
:root {--color: #000;--location: 0;--radius: 0;
}.box {height: 200px;width: 200px;background-color: var(--color);border-radius: var(--radius);/* 向右移动 */transform: translateX(var(--location));transition: width 2s;
}

因此，如果想改变box的样式，只需改变:root中的值即可。

注意，这里root中的变量名（color，location，radius），正好对应方法changeValue的第一个参数。

在这里插入图片描述

因此可以通过将输入的type与--拼接直接形成CSS变量，然后直接赋值。

root.style.setProperty(`--${type}`, value + add)

注意，颜色的赋值是不用加%的，而border-radius和transform: translateX()的数值要加%。

const root = document.documentElement;
function changeValue(type, value) {console.log(root)const add = (type != 'color' ? '%' : '');root.style.setProperty(`--${type}`, value + add)
}

这里的root是从html标签开始的整个文档树（DOM树）。我们使用root.style.setProperty将CSS变量直接赋值在文档树开头的style，就覆盖了原本CSS中的:root中的变量。

这样就可以动态赋值CSS。

在这里插入图片描述

参考：漫谈document.documentElement与document.body - 简书 (jianshu.com)

代码

HTML

<!-- author:https://blog.csdn.net/karshey -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic CSS Variables</title><link rel="stylesheet" href="style.css">
</head><body><div class="container"><div class="location item"><p>滑动移动方块位置</p><input type="range" value="0" min="0" max="200" oninput="changeValue('location',this.value)"></div><div class="radius item"><p>滑动改变方块弧度</p><input type="range" value="0" min="0" max="50" oninput="changeValue('radius',this.value)"></div><div class="color item"><p>选择改变方块颜色</p><input type="color" value="#000000" onchange="changeValue('color',this.value)"></div><div class="box"></div></div>
</body></html><script src="index.js"></script>

CSS

/* 统一配置box的样式 */
:root {--color: #000;--location: 0;--radius: 0;
}.container {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}.item {display: flex;align-items: center;justify-content: center;
}.item p {margin-right: 10px;
}.box {height: 200px;width: 200px;background-color: var(--color);border-radius: var(--radius);/* 向右移动 */transform: translateX(var(--location));transition: width 2s;
}

JS

const root = document.documentElement;
function changeValue(type, value) {console.log(root)const add = (type != 'color' ? '%' : '');root.style.setProperty(`--${type}`, value + add)
}

【前端demo】动态赋值CSS

文章目录效果过程html实现oninput与onchange事件统一配置CSS 代码HTMLCSSJS 其他demo 效果动态显示CSS样式，由:root统一配置。效果预览：https://codepen.io/karshey/pen/BavLrwy 参考： Dynamic CSS Variables(codepen.io) 漫谈document…...

编程日记 2023/9/5 7:55:45

BlockUI专栏目录

文章作者：里海来源网站：王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C-CSDN博客简介： BlockUI是一个设计NX对话框的工具，是官方推荐使用的对话框制作方法，能够与NX自身风格相统一，并且在实际…...

编程日记 2023/9/5 7:54:44

1、创建一个具有管理员权限的账户下载或拷贝文件到主机上，vi k8s-admin.yml --- apiVersion: v1 kind: ServiceAccount metadata:name: dashboard-adminnamespace: kube-system --- kind: ClusterRoleBinding apiVersion: rbac.authorization.k8s.io/v1beta1 met…...

编程日记 2023/9/5 7:53:41

CountDownLatch原理-（主线程等待子线程结束再执行）

CountDownLatch是共享锁的一种实现,它默认构造 AQS 的 state 值为 count。当线程使用countDown方法时,其实使用了tryReleaseShared方法以CAS的操作来减少state,直至state为0就代表所有的线程都调用了countDown方法。当调用await方法的时候，如果state不为0&#xff0…...

编程日记 2023/9/5 7:52:40

mybatis源码学习-3-解析器模块

写在前面,这里会有很多借鉴的内容,有以下三个原因本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…...

编程日记 2023/9/5 7:51:39

解决微信小程序recycle-view使用百分比单位控制宽高时出现的内容溢出问题

recycle-view是微信小程序官方推出的一个经过优化的长列表组件，但是在使用百分比单位控制高宽时有个内容溢出问题，虽然它提供了height和width的参数可以设置宽高，但每次写列表都需要去js里获取宽高并设置是较为麻烦的，所以现在来着…...

编程日记 2023/9/5 7:50:37

如何使用蚂蚁集团自动化混沌工程 ChaosMeta 做 OceanBase 攻防演练？

当前，业界主流的混沌工程项目基本只关注如何制造故障的问题，而经常做演练相关工作的工程师应该明白，每次演练时还会遇到以下痛点： 检测当前环境是否符合演练预设条件（演练准入）； 业务流量是否满…...

编程日记 2023/9/5 7:49:36

在 Node.js 中使用 MongoDB 事务

MongoDB事务事务介绍在 MongoDB 中，对单个文档的操作是原子的。由于您可以使用嵌入的文档和数组来捕获单个文档结构中的数据之间的关系，而不是跨多个文档和集合进行规范化，因此这种单一文档的原子性消除了对多文档的需求许多实际用例的事务…...

编程日记 2023/9/5 7:48:35

IntelliJ IDEA的远程开发（Remote Development）

DEA的远程开发功能，可以将本地的编译、构建、调试、运行等工作都放在远程服务器上执行，而本地仅运行客户端软件进行常规的开发操作即可，官方给出的逻辑图如下，可见通过本地的IDE和服务器上的IDE backend将本地电脑和服务器打通&am…...

编程日记 2023/9/5 7:47:34

网络安全-信息收集简介

本文为作者学习文章，按作者习惯写成，如有错误或需要追加内容请留言（不喜勿喷） 本文为追加文章，后期慢慢追加什么是信息收集信息收集是指通过各种方式获取所需要的信息，以便我们在后续的渗透过程更好的…...

编程日记 2023/9/5 7:46:33

页面页脚部分CSS分享

先看效果： CSS部分：（查看更多） <style>body {display: grid;grid-template-rows: 1fr 10rem auto;grid-template-areas: "main" "." "footer";overflow-x: hidden;background: #F5F7FA;min…...

编程日记 2023/9/5 7:45:32

微信小程序slot插槽的介绍，以及如何通过uniapp使用动态插槽

微信小程序文档 - slots介绍由上述文档看俩来，微信小程序官方并没有提及动态插槽内容。 uniapp文档 - slots介绍 uni官方也未提及关于动态插槽的内容在实际使用中，直接通过 <<slot :name"item.xxx" /> 这种形式会报错&#xff…...

编程日记 2023/9/5 7:44:31

l8-d6 socket套接字及TCP的实现框架

一、socket套接字 /*创建套接字*/ int socket(int domain, int type, int protocol); /*绑定通信结构体*/ int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen); /*监听套接字*/ int listen(int sockfd, int backlog); /*处理客户端发起的连接&#xff0…...

编程日记 2023/9/5 7:43:28

ChatGPT AIGC 完成动态堆积面积图实例

先使用ChatGPT AIGC描述一下堆积面积图的功能与作用。接下来一起看一下ChatGPT做出的动态可视化效果图：这样的动态图案例代码使用ChatGPT AIGC完成。将完整代码复制如下： <!DOCTYPE html> <html> <head><meta charset="utf-8"><tit…...

编程日记 2023/9/5 7:42:27

虹科产线实时数采检测方案——高速采集助力智能化升级

01 产线数采检测相关技术背景 1.1 典型场景对于产线数采检测，让我们从典型的工厂场景开始介绍。每个工位都有上位机监控下方的PLC控制器。指令、执行单元和作用对象的状态通过内置传感器进行采集和测量，反馈给PLC实现闭环控制。工业4.0和智能制…...

编程日记 2023/9/5 7:41:24

用迅为RK3568开发板使用OpenCV处理图像颜色通道提取ROI

本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程 \04_OpenCV 开发配套资料\07”目录下，如下图所示： 在计算机的色彩图像中存有三个通道，即 BGR 通道，根据三个颜色通道的亮度值来显示出不同的颜色&…...

编程日记 2023/9/5 7:40:24

低压配电室电力安全解决方案

低压电气安全监控运维系统是力安科技基于物联网核心技术自主开发的高可靠性安全监测系统。其工作原理是利用物联网、云计算、大数据、数字传感技术及RFID无线射频识别技术来获取低压配电回路电压、电流、温度、有功、无功、功率因数等全电量的采集及配电线路的漏电、温度的实时…...

编程日记 2023/9/5 7:39:23

【Windows 常用工具系列 11 -- 笔记本F5亮度调节关闭】

文章目录笔记本 F 按键功能恢复笔记本 F 按键功能恢复使用笔记本在进行网页浏览时，本想使用F5刷新下网页，结果出现了亮度调节，如下图所示： 所以就在网上查询是否有解决这个问题的帖子，结果还真找到了：…...

编程日记 2023/9/5 7:38:22

Python小知识 - 【Python】如何使用Pytorch构建机器学习模型

【Python】如何使用Pytorch构建机器学习模型机器学习是人工智能的一个分支，它的任务是在已有的数据集上学习，最终得到一个能够解决新问题的模型。Pytorch是一个开源的机器学习框架，它可以让我们用更少的代码构建模型，并且可以让模…...

编程日记 2023/9/5 7:37:21

使用Akka的Actor模拟Spark的Master和Worker工作机制

使用Akka的Actor模拟Spark的Master和Worker工作机制 Spark的Master和Worker协调工作原理在 Apache Spark 中，Master 和 Worker 之间通过心跳机制进行通信和保持活动状态。下面是 Master 和 Worker 之间心跳机制的工作流程： Worker 启动后&#xff0c…...

编程日记 2023/9/5 7:36:20

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2026/2/8 4:32:38

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2026/2/8 4:37:17

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2026/2/8 4:37:13

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了估计有） 刷机程序和镜像就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接在运行jar包时出现了这样的错误查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...

编程新知 2026/2/8 14:19:47

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文现有方法 CRADLE 和 LEMON，依赖模型推理阶段输出进行差分测试，但在训练阶段是不可行的，因为训练阶段直到最后才有固定输出，中间过程是不断变化的。API 库覆盖低，因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/9 16:59:34

文章目录

效果

过程

html实现

oninput与onchange事件

统一配置CSS

代码

HTML

CSS

JS

相关文章：