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

通过js控制修改css变量

news 2026/4/5 21:19:02

在JavaScript中，你可以通过操作CSS变量（也称为自定义属性）来动态改变样式。CSS变量在CSS中使用 – 前缀定义，例如 --main-color: red;。在JavaScript中，你可以使用 document.documentElement.style.setProperty 方法来设置这些变量，或者使用元素的 style.setProperty 方法（如果变量是在某个特定元素上定义的）。

以下是一些具体的示例：

1. 在全局范围内设置CSS变量

假设你有一个CSS变量 --main-color 定义在 :root 中：

:root {  --main-color: red;  
}

你可以使用JavaScript来修改这个变量：

document.documentElement.style.setProperty('--main-color', 'blue');

这样，所有使用了 --main-color 的元素都会更新为蓝色。

2. 在特定元素上设置CSS变量

如果你有一个CSS变量定义在某个特定的元素上，例如：

.my-element {  --border-color: black;  
}

你可以通过该元素的 style.setProperty 方法来修改这个变量：

const element = document.querySelector('.my-element');  
element.style.setProperty('--border-color', 'green');

3. 读取CSS变量的值

你也可以使用 getComputedStyle 方法来读取CSS变量的值：

const rootStyles = getComputedStyle(document.documentElement);  
const mainColor = rootStyles.getPropertyValue('--main-color');  
console.log(mainColor); // 输出 "blue"（假设之前已经被设置为蓝色）

4. 示例：动态改变背景颜色

下面是一个完整的示例，展示如何通过按钮点击事件动态改变CSS变量的值，从而改变页面的背景颜色：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>CSS Variables with JavaScript</title>  <style>  :root {  --bg-color: lightblue;  }  body {  background-color: var(--bg-color);  }  </style>  
</head>  
<body>  <button id="changeColorBtn">Change Background Color</button>  <script>  const changeColorBtn = document.getElementById('changeColorBtn');  changeColorBtn.addEventListener('click', () => {  const newColor = prompt('Enter a new color:');  document.documentElement.style.setProperty('--bg-color', newColor);  });  </script>  
</body>  
</html>

在这个示例中，点击按钮后会弹出一个提示框，让用户输入一个新的颜色值。然后，JavaScript会修改 :root 中的 --bg-color 变量，从而改变整个页面的背景颜色。

通过这些方法，你可以灵活地使用JavaScript来动态控制CSS变量的值，从而实现丰富的交互效果。

相关文章：

通过js控制修改css变量

在JavaScript中&#xff0c;你可以通过操作CSS变量&#xff08;也称为自定义属性&#xff09;来动态改变样式。CSS变量在CSS中使用 – 前缀定义&#xff0c;例如 --main-color: red;。在JavaScript中&#xff0c;你可以使用 document.documentElement.style.setProperty 方法来…...

编程日记 2024/11/1 6:59:50

＜HarmonyOS第一课＞HarmonyOS SDK开放能力简介的课后习题

不出户&#xff0c;知天下&#xff1b; 不窥牖&#xff0c;见天道。 其出弥远&#xff0c;其知弥少。 是以圣人不行而知&#xff0c;不见而明&#xff0c;不为而成。 本篇<HarmonyOS第一课>HarmonyOS SDK开放能力简介是简单介绍了HarmonyOS SDK&#xff0c;不需要大家过多…...

编程日记 2024/11/1 6:57:49

深度学习：yolo的使用--图像处理

定义了一个名为 ListDataset 的类&#xff0c;它继承自 PyTorch 的 Dataset 类,这个数据集从一个包含图像文件路径的列表中读取图像和对应的标签文件 class ListDataset(Dataset):def __init__(self, list_path, img_size416, augmentTrue, multiscaleTrue, normalized_labelsT…...

编程日记 2024/11/1 6:55:47

TypeScript实用笔记(一)：初始化、类型定义与函数使用

文章目录 一、ts初始化1. 初始化.json文件一2. 启动方式2.1 直接运行.ts文件2.2 转换运行 二、类型1. 参数类型1.1 常规参数1.2 symbol1.3 数组\[]1.4 元组\[]1.5 用字面量定义数据类型 2. Object3. 枚举类型\[Enum]3.1 数字枚举3.2 字符串枚举 三、 类型别名1. 数组别名使用2.…...

编程日记 2024/11/1 6:54:46

【大数据学习 | kafka】producer之拦截器，序列化器与分区器

1. 自定义拦截器 interceptor是拦截器&#xff0c;可以拦截到发送到kafka中的数据进行二次处理&#xff0c;它是producer组成部分的第一个组件。 public static class MyInterceptor implements ProducerInterceptor<String,String>{Overridepublic ProducerRecord<…...

编程日记 2024/11/1 6:52:44

零基础学西班牙语，柯桥专业小语种培训泓畅学校

No te comas el coco, seguro que te ha salido bien la entrevista. Ya te llamarn. 别瞎想了&#xff01;我保证你的面试很顺利。他们会给你打电话的。 这里的椰子是"头"的比喻。在西班牙的口语中&#xff0c;我们也可以听到其他同义表达&#xff0c;比如&#x…...

编程日记 2024/11/1 6:47:40

C++学习：类和对象（三）

一、深入讲解构造函数 1. 什么是构造函数&#xff1f; 构造函数&#xff08;Constructor&#xff09;是在创建对象时自动调用的特殊成员函数&#xff0c;用于初始化对象的成员变量。构造函数的名称与类名相同&#xff0c;没有返回类型 2. 构造函数的类型 &#xff08;1&…...

编程日记 2024/11/1 6:46:40

高阶数据结构--图（graph）

图&#xff08;graph&#xff09; 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…...

编程日记 2024/11/1 6:45:38

xxl-job java.sql.SQLException: interrupt问题排查

近期生产环境固定凌晨报错&#xff0c;提示 ConnectionManager [Thread-23069] getWriteConnection db:***,pattern: error, jdbcUrl: jdbc:mysql://***:3306/***?connectTimeout3000&socketTimeout180000&autoReconnecttrue&zeroDateTimeBehaviorCONVERT_TO_NUL…...

编程日记 2024/11/1 6:43:36

jmeter压测工具环境搭建（Linux、Mac）

目录 java环境安装 1、anaconda安装java环境&#xff08;推荐&#xff09; 2、直接在本地环境安装java环境 yum方式安装jdk 二进制方式安装jdk jmeter环境安装 1、jmeter单机安装 启动jmeter 配置环境变量 jmeter配置中文 2、jmeter集群搭建 多台机器部署jmeter集群…...

编程日记 2024/11/1 6:40:33

docker设置加速

sudo tee /etc/docker/daemon.json <<-‘EOF’ { “registry-mirrors”: [ “https://register.liberx.info”, “https://dockerpull.com”, “https://docker.anyhub.us.kg”, “https://dockerhub.jobcher.com”, “https://dockerhub.icu”, “https://docker.awsl95…...

编程日记 2024/11/1 6:39:31

使用requestAnimationFrame写防抖和节流

debounce.ts 防抖工具函数: function Animate() {this.timer null; }Animate.prototype.start function (fn) {if (!fn) {throw new Error(需要执行函数);}if (this.timer) {this.stop();}this.timer requestAnimationFrame(fn); }Animate.prototype.stop function () {i…...

编程日记 2024/11/1 6:34:27

Puppeteer 与浏览器版本兼容性：自动化测试的最佳实践

Puppeteer 支持的浏览器版本映射&#xff1a;从 v20.0.0 到 v23.6.0 自 Puppeteer v20.0.0 起&#xff0c;这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径&#xff0c;为自动化测试带来了更多便利。从 v23.0.0 开始&#xff0c;Puppeteer 进…...

编程日记 2024/11/1 6:32:24

Java方法重写

在Java中&#xff0c;方法重写是指在子类中重新定义父类中已经定义的方法。以下是Java方法重写的基本原则&#xff1a; 子类中的重写方法必须具有相同的方法签名&#xff08;即相同的方法名、参数类型和返回类型&#xff09;。子类中的重写方法不能比父类中的原方法具有更低的…...

编程日记 2024/11/1 6:31:24

vscode通过.vscode/launch.json 内置php服务启动thinkphp 应用后无法加载路由解决方法

我们在使用vscode的 .vscode/launch.json Launch built-in server and debug 启动thinkphp应用后默认是未加载thinkphp的路由文件的&#xff0c; 这个就导致了&#xff0c;某些thinkphp的一些url路由无法访问的情况&#xff0c; 如http://0.0.0.0:8000/api/auth.admin/info这…...

编程日记 2024/11/1 6:30:22

Webserver(2.6)有名管道

目录 有名管道有名管道使用有名管道的注意事项读写特性有名管道实现简单版聊天功能拓展&#xff1a;如何解决聊天过程的阻塞 有名管道 可以用在没有关系的进程之间&#xff0c;进行通信 有名管道使用 通过命令创建有名管道 mkfifo 名字 通过函数创建有名管道 int mkfifo …...

编程日记 2024/11/1 6:28:20

四足机器人实战篇之一：波士顿spot机器人工程实现分析

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、机器人发展历史二、硬件系统及电机执行器篇硬件系统电机执行器传感器机处理器电气连接三、感知（视觉点云、局部地图、定位）篇1.深度相机获取…...

编程日记 2024/11/1 6:25:17

TensorFlow 预训练目标检测模型集合

Tensorflow 提供了一系列在不同数据集上预训练的目标检测模型&#xff0c;包括 COCO 数据集、Kitti 数据集、Open Images 数据集、AVA v2.1 数据集、iNaturalist 物种检测数据集 和 Snapshot Serengeti 数据集。这些模型可以直接用于推理&#xff0c;特别是当你对这些数据集中已…...

编程日记 2024/11/1 6:24:15

字符串的区别

C 和 Java 字符串的区别 最近 C 和 Java 在同步学习&#xff0c;都有个字符串类型&#xff0c;但二者不太一样&#xff0c;于是就做了些许研究。 在编程中&#xff0c;字符串作为数据类型广泛应用于不同的场景。虽然 C 和 Java 都允许我们处理字符串&#xff0c;但它们在字符…...

编程日记 2024/11/1 6:22:11

EMR Serverless Spark：一站式全托管湖仓分析利器

本文根据2024云栖大会实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a; 李钰&#xff08;绝顶&#xff09; | 阿里云智能集团资深技术专家&#xff0c;阿里云 EMR 团队负责人 活动&#xff1a; 2024 云栖大会 AI - 开源大数据专场 数据平台技术演变 …...

编程日记 2024/11/1 6:21:09

从商业目标到技术实现：通用系统设计的四层逻辑框架

文章目录1. 商业目标&#xff08;Business Goals&#xff09;2. 业务逻辑&#xff08;Business Logic&#xff09;3. 应用逻辑&#xff08;Application Logic&#xff09;4. 技术架构&#xff08;Technical Architecture&#xff09;5. 四层逻辑的流动与反馈参考资料在构建任何…...

编程新知 2026/4/5 20:34:34

Dual-Loop Adaptive AI System Whitepaper（DLAAS）双环自适应AI系统正式命名白皮书

Dual-Loop Adaptive AI System Whitepaper&#xff08;DLAAS&#xff09;双环自适应AI系统—— 基于六元结构&#xff08;TSPR-WEB-LLM-HIC-A-F&#xff09;的生成式AI决策操作系统版权与所有权声明本技术系统的全部知识产权归以下主体独家所有&#xff1a;拓世网络技术开发室&…...

编程新知 2026/4/5 20:01:37

基于元模型优化的虚拟电厂主从博弈动态定价与能量管理双层调度策略

MATLAB代码&#xff1a;基于元模型优化的虚拟电厂主从博弈优化调度模型 关键词&#xff1a;元模型 虚拟电厂 主从博弈 优化调度 参考文档&#xff1a;《基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理》复现元模型 仿真平台&#xff1a;MATLABCPLEX平台 主要内容&a…...

编程新知 2026/4/5 19:13:00

MAA助手跨平台部署与自动化实践指南

MAA助手跨平台部署与自动化实践指南 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://gitcode.com/GitHub_Trending/ma/…...

编程新知 2026/4/5 18:50:39

2025届毕业生推荐的五大AI辅助论文平台推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 使AIGC检测率得以降低的关键要点在于&#xff0c;切实有效地去削弱文本所展现出来的呈现机器…...

编程新知 2026/4/5 18:09:46

如何让旧iPhone/iPad焕发新生：Legacy-iOS-Kit终极降级指南

如何让旧iPhone/iPad焕发新生&#xff1a;Legacy-iOS-Kit终极降级指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...

编程新知 2026/4/5 17:07:12

三步快速上手Bootstrap Datepicker：打造专业级网页日期选择器

三步快速上手Bootstrap Datepicker&#xff1a;打造专业级网页日期选择器 【免费下载链接】bootstrap-datepicker A datepicker for twitter bootstrap (twbs) 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-datepicker Bootstrap Datepicker是一款基于Bootst…...

编程新知 2026/4/5 16:39:00

效率提升秘籍：用快马AI一键生成龙虾openclaw官网的高复用性组件代码

效率提升秘籍&#xff1a;用快马AI一键生成龙虾openclaw官网的高复用性组件代码 最近在开发龙虾openclaw官网时&#xff0c;我发现重复性的页面结构、样式编写和组件集成耗费了大量时间。作为一个追求效率的开发者&#xff0c;我开始寻找能够简化这些流程的工具&#xff0c;直…...

编程新知 2026/4/5 16:34:57

零基础前端入门：借助快马AI生成你的第一个可交互魔鬼面具网页

最近想学前端开发&#xff0c;但面对一堆陌生的术语和复杂的配置&#xff0c;总感觉无从下手。直到发现了InsCode(快马)平台&#xff0c;用自然语言描述就能生成可运行的代码&#xff0c;简直是新手福音&#xff01;这次尝试做了一个可交互的魔鬼面具网页&#xff0c;整个过程特…...

编程新知 2026/4/5 15:18:00

别再花钱买模板了！用Coze工作流+剪映，5分钟搞定爆款灵魂画手视频

零成本玩转灵魂画手视频&#xff1a;Coze工作流剪映极简教程 每次刷到那些魔性又上头的灵魂画手视频&#xff0c;你是不是也好奇它们是怎么做出来的&#xff1f;其实根本不需要什么专业剪辑技能&#xff0c;也不用花钱买模板。今天我要分享的这个方法&#xff0c;只需要5分钟就…...

编程新知 2026/4/5 14:59:31