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

【前端demo】动态赋值CSS

news 2026/2/10 8:52:19

文章目录

- 效果
- 过程
- - 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

vscode里如何用git

打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2026/1/21 14:29:57

全球首个30米分辨率湿地数据集(2000—2022)

数据简介今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

Spring Boot面试题精选汇总

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/9 23:40:53

JVM 内存结构详解

内存结构运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

文章目录

效果

过程

html实现

oninput与onchange事件

统一配置CSS

代码

HTML

CSS

JS

相关文章：