CSS 中使用 JS 变量

在 CSS 中使用 JS 变量，可以通过 CSS 变量（Custom Properties）实现。定义 CSS 变量时，可以使用 var() 函数来引用 JS 变量。

以下是一个例子：

<style>
  :root {
    --main-color: #ff0000;
  }
  
  .box {
    background-color: var(--main-color);
  }
</style>

<div class="box"></div>

<script>
  // JS 变量
  const mainColor = "#00ff00";
  // 将 JS 变量赋值给 CSS 变量
  document.documentElement.style.setProperty('--main-color', mainColor);
</script>

在上述例子中，定义了一个名为 `--main-color` 的 CSS 变量，并将其赋值为 `#ff0000`。在 `.box` 类的样式中使用 var() 函数引用了该变量，从而将其作为背景颜色。然后，通过 JS 将 `--main-color` 的值修改为 `#00ff00`，从而改变了背景颜色。

相关问题

react 中 css怎么使用js变量

在 React 中，可以使用 JavaScript 变量来动态设置 CSS 样式。可以通过将 CSS 样式定义为一个对象，使用 JavaScript 变量来设置样式的值。

例如，假设我们有一个名为 `primaryColor` 的变量，可以这样在 CSS 中使用它：

import React from 'react';

const primaryColor = '#007bff';

const styles = {
  button: {
    backgroundColor: primaryColor,
    color: '#fff',
    padding: '10px 20px',
    borderRadius: '5px',
    border: 'none',
    cursor: 'pointer',
  },
};

function MyButton() {
  return <button style={styles.button}>Click me</button>;
}

export default MyButton;

在上面的代码中，我们将 `primaryColor` 定义为一个变量，并在 `styles` 对象中使用它来设置按钮的背景颜色。然后将样式对象作为 `style` 属性传递给按钮组件。

这样，当 `primaryColor` 的值改变时，按钮的背景颜色也会相应地改变。

如何在css中使用动态变量

在CSS中，可以使用CSS变量（CSS Variables）来定义和使用动态变量。

CSS变量的定义以`--`开头，后面跟着变量名和变量值。例如：

:root {
  --main-color: #ff0000;
}

在定义CSS变量时，需要将其放在`:root`伪类中，`:root`伪类表示文档的根元素（HTML元素）。

在使用CSS变量时，可以通过`var()`函数来引用变量。例如：

div {
  background-color: var(--main-color);
}

上面的代码中，`var(--main-color)`表示引用`--main-color`变量的值作为`background-color`的值。

在JavaScript中，可以通过`document.documentElement.style.setProperty()`方法来动态设置CSS变量的值。例如：

document.documentElement.style.setProperty('--main-color', '#00ff00');

上面的代码中，将`--main-color`变量的值设置为`#00ff00`。

需要注意的是，CSS变量的兼容性不是非常好，需要在使用时注意浏览器的兼容性。