简单使用js控制scss(react同理)

文章目录

简单使用js控制scss(react同理)
总结

相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面样式问题的需求，又比如我页面很多相同的样式值要修改那么又懒得去找js部分的类名那这时候就需要根据js设置css了，故此写下笔记以防忘记。

提示：以下是本篇文章正文内容，下面案例可供参考

简单来说 setProperty方法接受三个值第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填) 可选值：important，undefined ，‘’

 html 部分// 判断条件 如果条件成立则会给css对象设置一个新的值。if ( otherUser.length ) {document.getElementsByTagName('body')[0].style.setProperty('--width-primary','177.8vh');} else {document.getElementsByTagName('body')[0].style.setProperty('--width-primary','204.8vh');}
scss 部分```javascript// 定义 :root {--width-primary: 204.8vh;  //--width-primary  ：变量名，css3有规则--width-primarythree: 93.13vh;--width-primaryhost: 90.13vh;}$minWidth: var(--width-primary); // 用var来盛放变量名$minWidththree: var(--width-primarythree);$minWidthHost: var(--width-primaryhost);// 使用.pattern3 {width: calc(#{$minWidthHost} * 1.8535);height: $minWidththree;}

总结

文档参考：利用css3的var()实现运行时改变scss的变量值.
CSSStyleDeclaration.setProperty()
JavaScript CSSStyleDeclaration 对象

使用css3中的var()实现改变scss的变量值相关推荐

css3中var函数
1.css3中的var()函数 var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用. var函数有两个参数 var(custom-property-name, valu ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
css3中的渐变效果及花斑动画的实现
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理...
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的&quo ...
CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
学完css3的总结,css3中常见的单位及总结
摘要:css3中常见的单位:1. px:绝对单位,页面按精确像素展示2. em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内 ...
js中const,var,let区别与用法
原文链接:https://blog.csdn.net/qq_36784628/article/details/80966826 js中三种定义变量的方式const, var, let的区别. 1. c ...

使用css3中的var()实现改变scss的变量值

简单使用js控制scss(react同理)

文章目录

总结

使用css3中的var()实现改变scss的变量值相关推荐

最新文章

热门文章