CSS JavaScript变量与CSS

在本文中，我们将介绍如何使用JavaScript变量来操作CSS样式。

阅读更多：CSS 教程

什么是CSS变量？

CSS变量（也称为自定义属性）是一种在CSS中定义的变量。它们用于存储和表示各种样式值，例如颜色、尺寸、间距等。CSS变量的语法以”–“开头，后面跟着变量的名称。

例如，下面的代码演示了如何定义和使用CSS变量：

:root {
  --primary-color: blue;
  --secondary-color: red;
}

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

p {
  color: var(--secondary-color);
}

在上面的代码中，我们使用:root伪类来定义了两个CSS变量：--primary-color和--secondary-color。然后，在h1元素和p元素中，我们使用了var()函数来使用这些CSS变量。

使用JavaScript更改CSS变量

使用JavaScript可以动态地更改CSS变量的值。这允许我们在运行时根据不同的条件更改样式。

下面是一个示例，在单击按钮时更改--primary-color变量的值：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }

    h1 {
      color: var(--primary-color);
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--primary-color', 'red');
    }
  </script>
</body>
</html>

在上面的代码中，我们使用JavaScript的setProperty()方法来更改--primary-color变量的值为红色。单击按钮后，h1元素的文本颜色将变为红色。

使用JavaScript计算CSS变量

除了更改CSS变量的值，我们还可以使用JavaScript来计算CSS变量的值。这使得我们可以通过一些算法动态地生成样式值。

下面是一个示例，使用JavaScript计算并更改--primary-color变量的值：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }

    h1 {
      color: var(--primary-color);
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      // 计算新的颜色值
      var newColor = calculateColor();

      // 更新CSS变量值
      document.documentElement.style.setProperty('--primary-color', newColor);
    }

    function calculateColor() {
      // 在这里编写计算颜色的算法
      return 'red';
    }
  </script>
</body>
</html>

在上面的代码中，我们定义了一个名为calculateColor()的函数，用于计算新的颜色值。当单击按钮时，该函数将被调用并返回新的颜色值。然后，我们使用setProperty()方法将该值应用到--primary-color变量中，从而更改h1元素的文本颜色。