Assign Js to Css

Sat, 04 Apr 2026 13:34:53 +0800

JavaScript 变量赋值给 CSS 使用

方法一: 原生 dom 方法

使用原生的 dom 的方法来改变 css 的样式, 示例:

1document.getElementById(id).style.property = new style();

这里的 new style 里边就可以使用 js 传入的变量

此方法固然可以，但是对应改变一些复杂的 CSS,比如动画等，操作起来就不太方便了。此时以下方法就显得更为重要了.

方法二: CSS 变量

利用 CSS 变量来处理，思路是将 js 变量赋值给 css 变量，然后在 css 样式中使用 css 变量.

示例:

1// 设置变量
2document.body.style.setProperty("--primary", "#7F583F");
3// 读取变量
4document.body.style.getPropertyValue("--primary").trim();
5// '#7F583F'
6// 删除变量
7document.body.style.removeProperty("--primary");

1/* style 中直接声明css变量 */
2body {
3	--foo: #7f583f;
4}
5.content {
6	--bar: #f7efd2;
7}

Javascript on 喵喵麦乐迪

Assign Js to Css

JavaScript 变量赋值给 CSS 使用

方法一: 原生 dom 方法

方法二: CSS 变量