js修改scss变量

news2024/11/18 1:51:40

 style.scss

$color : var(--color,'#ccc');
// 默认值 #ccc
.color{
  background: $color;
}

        定义了一个scss变量($color),用普通的css变量(--color)给他赋值,这里需要一个默认值,此时css变量(--color)还没有定义,接下来只有通过js修改css变量(--color),那么scss变量($color)就会改变,但是要注意,scss变量($color)是全局生效的,也就是说不管是在哪里修改了scss变量($color),全局的scss变量($color)都会变化,(这个效果常用来修改全局的主题)

修改实现流程: js--->css--->scss

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js修改scss变量</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="color"></div>
  <button onclick="changeColor()">修改scss变量</button>
</body>
<script>
  function changeColor(){
    if(document.body.style.getPropertyValue('--color')!='red'){
      console.log(document.body.style.getPropertyValue('--color'));
      document.body.style.setProperty('--color', 'red');
    }else{
      console.log(document.body.style.getPropertyValue('--color'));
      document.body.style.setProperty('--color', 'gray');
    }
    
  }
</script>
</html>

         代码很简单,主要是在body修改css变量(--color) 因为页面中body的所有子元素会自动继承css变量(--color),这样即使有多个元素都会引起变化

这里点击一次按钮,div的颜色就变化一次

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1882668.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线性图标设计

创建图标区域 按键A&#xff0c;创建一个24x24的背景。 图标绘制包含几个点 矢量图形绘制&#xff1a;箭头、圆、三角...... 绘制箭头和矩形 1.下载图标 双击矩形选中要删除的点 调整一下即可得到下载的图标。 2.时间图标 按快捷键O画个圆&#xff0c;L加两条线变成一个时钟…

Spire.PDF for .NET【文档操作】演示:在 PDF 中创建目录 (TOC)

目录在增强文档的可读性和可导航性方面起着至关重要的作用。它为读者提供了文档结构的清晰概述&#xff0c;使他们能够快速找到并访问他们感兴趣的特定部分或信息。这对于较长的文档&#xff08;例如报告、书籍或学术论文&#xff09;尤其有价值&#xff0c;因为读者可能需要多…

Games101学习笔记 Lecture 15: Ray Tracing 3 (Light Transport Global Illumination)

Lecture 15: Ray Tracing 3 (Light Transport & Global Illumination 一、BRDF 双向反射分布函数定义 二、反射方程 Reflection Equation三、渲染方程1.重写反射方程2.当其他的点反射的radiance作为入射 一、BRDF 双向反射分布函数 定义 计算不同的反射方向上会分布多少能…

选哪个短剧系统源码好:全面评估与决策指南

在短剧内容创作和分享日益流行的今天&#xff0c;选择合适的短剧系统源码对于构建一个成功的短剧平台至关重要。短剧系统源码不仅关系到平台的稳定性和用户体验&#xff0c;还直接影响到内容创作者和观众的互动质量。本文将提供一份全面的评估指南&#xff0c;帮助您在众多短剧…

道可云AI智能体平台全新升级,加快培育发展新质生产力

数字化时代浪潮下&#xff0c;以人工智能为代表的新一代信息技术正在加速推动社会变革&#xff0c;给各行各业带来巨大发展机遇。在AI技术的加持下&#xff0c;“人工智能”成为时代发展趋势&#xff0c;也是加快培育和发展新质生产力的新动能。 为培育数字经济发展新动能&…

【C语言】C语言 4 个编译过程详解

C语言的编译过程涉及几个关键步骤、概念和细节&#xff0c;每个步骤都有助于将人类可读的源代码转换为可执行的机器码。以下是详细的解释和示例&#xff1a; 一、什么是编译&#xff1f; 编译是将源代码转换为目标代码的过程。它是在编译器的帮助下完成的。编译器检查源代码是…

数据分析与挖掘案例-电子商务网站用户行为分析及服务推荐

数据分析与挖掘案例-电子商务网站用户行为分析及服务推荐 文章目录 数据分析与挖掘案例-电子商务网站用户行为分析及服务推荐1. 背景与挖掘目标2. 分析方法与过程2.1 分析步骤与流程2.2 数据抽取2.3 数据探索分析1. 分析网页类型2. 分析网页点击次数 2.4 数据预处理1. 删除不符…

vision mamba-yolov8:结合Vmamba的yolov8目标检测改进实现

1.vision mamba结构与原理 Mamba成功的关键在于S6模型&#xff0c;该模型为NLP任务设计&#xff0c;通过选择性扫描空间状态序列模型&#xff0c;将二次复杂度降低至线性。但由于视觉信号&#xff08;如图像&#xff09;的无序性&#xff0c;Mamba的S6模型不能直接应用&#xf…

Python基础之多进程

文章目录 1 多进程1.1 简介1.2 Linux下多进程1.3 multiprocessing1.4 Pool1.5 进程间通信1.6 分布式进程 1 多进程 1.1 简介 要让Python程序实现多进程&#xff08;multiprocessing&#xff09;&#xff0c;我们先了解操作系统的相关知识。 Unix/Linux操作系统提供了一个fork…

【Unity小技巧】Unity字典序列化

字典序列化 在 Unity 中&#xff0c;标准的 C# 字典&#xff08;Dictionary<TKey, TValue>&#xff09;是不能直接序列化的&#xff0c;因为 Unity 的序列化系统不支持非 Unity 序列化的集合类型。可以通过手写字典实现 效果&#xff1a; 实现步骤&#xff1a; 继承ISe…

Python从0到100(三十三):xpath和lxml类库

1. 为什么要学习xpath和lxml lxml是一款高性能的 Python HTML/XML 解析器&#xff0c;我们可以利用XPath&#xff0c;来快速的定位特定元素以及获取节点信息 2. 什么是xpath XPath&#xff0c;全称为XML Path Language&#xff0c;是一种用于在XML文档中进行导航和数据提取的…

看不懂懂车大爆炸,你就错过了国产小车的王炸!

咦&#xff1f;咋的啦&#xff1f;咱中国自己的汽车品牌前几天在汽车工业协会公布的数据里一跃而起&#xff0c;真的是威风凛凛啊&#xff01;2023年咱们自家的乘用车品牌市场份额硬生生地占了个56%&#xff0c;这可是半壁江山啊&#xff01;特别是那些10万块钱以下的家用小车&…

K-Planes代码记录

随记 原文 K-Planes: Explicit Radiance Fields in Space, Time, and Appearance&#xff0c;又要换baseline&#xff0c;可是效果不好能怎么办呢&#xff0c;我可不可以发疯。k-planes的代码又是非常工程琐碎的&#xff0c;大佬的代码果然不顾小白死活。随便记录下整个过程。…

造一个交互式3D火山数据可视化

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 Plotly.js 创建交互式 3D 火山数据可视化 应用场景 本代码用于将火山数据库中的数据可视化&#xff0c;展示火山的高度、类型和状态。可用于地质学研究、教育和数据探索。 基本功能 该代码使用 Plotly…

【面试系列】信息安全分析师高频面试题及详细解答

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff1a;详细讲解AIGC的概念、核心技术、…

基于TCP/QT/C++的网盘系统测试报告

目录 一、项目介绍 1、项目描述 2、项目组成模块 3、项目技术要点 二、用户功能测试 1、查看在线用户测试 1.1、运行服务器 1.2、登录两个账号 1.3、点击显示在线用户&#xff0c;可以看到jack和lucy 2、搜索用户测试 2.1、打开服务器&#xff0c;登录两个账号jack,lucy 2.2、在…

强化学习的数学原理:贝尔曼公式

大纲 这一节课程的大纲&#xff1a; 重点 对于这次课&#xff0c;重点是两个东西&#xff1a; Motivating examples(为什么需要贝尔曼公式) 首先要明白&#xff0c;为什么 return 是重要的&#xff1f; 之前其实就说过&#xff0c;return 能够帮助我们评价一个策略是好还是坏…

哪个牌子的超声波清洗器好?精选四大超强超声波清洗机力荐

生活中戴眼镜的人群不在少数&#xff0c;然而要维持眼镜的干净却不得不每次都需要清洗&#xff0c;只是通过手洗的方式实在太慢并且容易操作不当让镜片磨损更加严重&#xff01;所以超声波清洗机就诞生了&#xff01;超声波清洗机能够轻松清洗机眼镜上面的油脂污渍&#xff0c;…

Kubernetes的发展历程:从Google内部项目到云原生计算的基石

目录 一、起源与背景 1.1 Google的内部项目 1.2 Omega的出现 二、Kubernetes的诞生 2.1 开源的决策 2.2 初期发布 三、Kubernetes的发展历程 3.1 社区的成长 3.2 生态系统的壮大 3.3 重大版本和功能 3.4 多云和混合云的支持 四、Kubernetes的核心概念 4.1 Pod 4.…

有源晶振Output Load含义与供电范围解析

在深入探讨有源晶振的Output Load与供电范围之前&#xff0c;我们首先需要了解有源晶振的基本概念。有源晶振&#xff0c;又称为实时时钟模块或晶体振荡器&#xff0c;是一种能够提供稳定、精确频率信号的电子组件。与无源晶振不同&#xff0c;有源晶振内部包含了必要的电路&am…