js改变css变量值

Vue3 JS 与 SCSS 变量相互使用 - 干货

SCSS 和 JS 变量无法直接相互通信。

SCSS变量不能在JS中使用。
我上周刚刚做了一个项目，这很常见。

如果要在SCSS中使用JS变量，必须依赖CSS自定义属性。
说白了，JS改变了全局样式，SCSS也随之改变。

例如在JS中这样写：document.documentElement.style.setProperty('--titleColor', '3 3 3 ')。

然后在SCSS中使用：$titleColor: var(--titleColor);
这也可以在Vue模板中完成：:style="{ '--titleColor': '3 3 3 ' }"。

构建工具也可以提供帮助，但通常不是必需的。

CSS自定义属性是最方便的。
你自己看看吧。

JS如何控制CSS变量动态 3种方式实时修改CSS变量值

哇，说到用 JS 改变 CSS 变量，这真是一门科学。
我们必须现实一点，定义哪个版本和哪个浏览器。
我们不能说“很多浏览器”或类似的话。

首先，我们需要知道改变JS CSS变量的方式主要有3 种。
第一种是直接使用setProperty方法。
这种方法简单直接，就像直接改变衣服的颜色一样。
例如，您可以使用 document.documentElement.style.setProperty() 在任何版本的现代浏览器中直接更改变量值。
例如：JavaScript const root = document.documentElement; root.style.setProperty('--my-variable', 'red'));
这件事容易吗？但请注意，变量名必须以--开头。
更新后，应通过 getCompulatedStyle 读取该值。
直接访问 root.style 可能无法访问继承的变量。
就像换衣服后照镜子看效果一样。
第二种方法是通过 CSSStyleDeclaration 对象进行工作。
这种方法写起来比较简洁，适合封装为模块代码中的独立函数。
就像换衣服一样，有时我们直接换，有时我们必须先找到合身的衣服。
JavaScript const root = document.documentElement; root.style.setProperty('--my-variable', '2 0px'); console.log(root.style.getPropertyValue('-my-variable'));
第三种方法更高级，应该与事件侦听器混合以动态更改状态。
例如，您可以监听用户单击按钮并随机更改背景颜色。
这就像我们玩游戏并随着游戏的进行而更换衣服一样。

<button id="changeColorBtn">更改背景颜色</button> <脚本> const 按钮 = document.getElementById('changeColorBtn'); const root = document.documentElement; Button.addEventListener('点击', () => { const randomColor = '' + Math.floor(Math.random() 1 6 7 7 7 2 1 5 ).toString(1 6 ); root.style.setProperty('-bg-color', randomColor); }); </脚本>
这三种方法各有其实用性。
使用哪一种取决于您的需要。

然后我们需要谈谈优化和管理技巧。
例如，通过模块封装，您可以将动态操作封装成独立的模块，并集中管理主题或全局样式逻辑。
在性能优化方面，需要避免重复更新，将很多任务合并到一组更新中。
关于兼容性，较旧的浏览器可能通过 css-vars-ponyfill 兼容你可以。
总的来说，明智地使用这些方法，可以实现灵活高效的动态样式控制，提高用户体验。
就像我们换衣服时，要分清场合、天气、心情，这样才能穿得舒适又时尚。