css中使用js变量 |css 占满剩余

const primaryColor = '#FF5733';
document.documentElement.style.setProperty('--primary-color', primaryColor);

上面的代码中，大家定义了一个名为primaryColor的变量，并将其设置为#FF5733。接下来，大家可以使用JavaScript来更新名为–primary-color的根变量，以便在CSS中使用它。

h1 {
color: var(--primary-color);
}

现在，无论变量何时更改，网页上的h1元素都将自动更改为新的色值。

另外，大家还可以在CSS中使用函数来操作变量。例如，下面的代码将大家之前的primaryColor变量转换为更深的颜色：

:root {
--primary-color: #FF5733;
--dark-primary-color: color(var(--primary-color) darken(10%));
}
h1 {
color: var(--dark-primary-color);
}

这里，大家定义一个名为–dark-primary-color的新变量，并使用CSS的color()函数将其设置为比–primary-color更深的颜色。大家在h1中使用–dark-primary-color来设置文字颜色。

总之，使用JS变量使得在CSS中编写更加灵活和动态的样式变得非常容易。您可以在JavaScript中定义变量和函数，然后在CSS中使用这些变量来更改样式。这种灵活性也使得跨浏览器和跨设备的样式更容易。