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

js修改scss变量

 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.lryc.cn/news/389119.html

相关文章:

  • 【中霖教育怎么样】报考注册会计师有年龄限制吗?
  • PHP验证日本手机电话号码
  • Qt 配置ASan
  • MySQL常用操作命令大全
  • 有人物联的串口服务器USR-TCP232-410S基本测试通信和使用方案(485串口和232串口)
  • 二维码登录的原理
  • 归并排序详解(递归与非递归)
  • 计算机系统基础(二)
  • vue根据文字长短展示跑马灯效果
  • leetcode-21-回溯-全排列及其去重
  • 如何根据两个关键字查询报错日志的位置
  • 短视频预算表:成都柏煜文化传媒有限公司
  • 【Llama 2的使用方法】
  • mysql-sql-第十三周
  • 【Android】ViewPage2嵌套Fragment+SeekBar横向滑动冲突
  • 【408考点之数据结构】图的遍历
  • 自动驾驶---Motion Planning之多段五次多项式
  • Linux基础IO操作详解
  • 轻松掌握:Hubstudio指纹浏览器如何接入IPXProxy代理IP
  • React小记(五)_Hooks入门到进阶
  • 使用工业自动化的功能块实现大语言模型应用
  • PPT文件中,母版视图与修改权限的区别
  • php简单的单例模式
  • 【面试题】IPS(入侵防御系统)和IDS(入侵检测系统)的区别
  • 宠物博主亲测养宠好物安利,口碑好的狗毛空气净化器推荐
  • 常用工具类
  • 【数据库原理】总结(期末版)
  • 【算能全国产AI盒子】基于BM1688CV186AH+FPGA智能物联工作站,支持差异化泛AI视觉产品定制
  • 材质相关内容整理 -ThreeJs
  • ES 嵌套查询