白骑士的CSS教学进阶篇之CSS变量 3.4.3 动态改变CSS变量

白骑士所长

已于 2024-09-20 13:21:43 修改

阅读量1.3k

点赞数 11

分类专栏： CSS 教学文章标签： css 前端 javascript html

于 2024-08-31 00:00:49 首次发布

本文链接：https://blog.csdn.net/JeremyTC/article/details/141410935

版权

教学同时被 2 个专栏收录

282 篇文章 2 订阅

订阅专栏

CSS

76 篇文章 0 订阅

订阅专栏

系列目录

上一篇：白骑士的CSS教学进阶篇之CSS变量 3.4.2 作用域与继承

CSS变量（自定义属性）的动态改变是一个强大的功能，它允许在网页的不同状态或事件发生时，实时更新样式。通过动态改变CSS变量，可以实现各种动态效果和交互式设计，这种能力使得网页的样式更加灵活和响应迅速。本文将详细介绍如何动态改变CSS变量，包括使用JavaScript修改变量值、结合CSS动画和过渡效果动态更新样式，以及如何利用这些功能创建互动和响应式的网页设计。

使用JavaScript动态改变CSS变量

JavaScript提供了强大的功能来修改CSS变量的值，使得动态更新样式变得简单而直观。通过JavaScript，可以实时更改CSS变量的值，从而影响网页的样式和布局。

访问和修改CSS变量

要动态改变CSS变量，首先需要访问包含这些变量的元素。通常，CSS变量定义在根元素（‘:root‘）中，或其他特定的容器元素中。使用JavaScript，可以通过‘getComputedStyle‘方法获取元素的当前样式，并使用‘setProperty‘方法更新CSS变量的值。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>动态改变CSS变量</title>

  <style>
    :root {
      --main-bg-color: #3498db;
    }

    body {
      background-color: var(--main-bg-color);
      transition: background-color 0.3s ease;
    }

    .btn {
      margin: 20px;
      padding: 10px 20px;
      background-color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <button class="btn" onclick="changeColor()">改变背景颜色</button>

  <script>
    function changeColor() {
      // 获取根元素
      const root = document.documentElement;

      // 随机生成颜色
      const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

      // 更新CSS变量的值
      root.style.setProperty('--main-bg-color', randomColor);
    }
  </script>
</body>
</html>

在这个示例中，我们使用‘document.documentElement‘访问根元素，并通过‘style.setProperty‘方法动态更新‘--main-bg-color‘变量的值。当点击按钮时，背景颜色会根据生成的随机颜色进行更新。

修改局部作用域的CSS变量

除了修改全局CSS变量，还可以在特定元素中定义和修改局部作用域的CSS变量。使用JavaScript可以选择特定元素并更新其CSS变量。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>局部CSS变量动态更新</title>

  <style>
    .box {
      --box-bg-color: #2ecc71;
      background-color: var(--box-bg-color);
      width: 200px;
      height: 200px;
      margin: 20px;
      transition: background-color 0.3s ease;
    }
  </style>
</head>

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

  <button onclick="changeBoxColor()">改变盒子颜色</button>

  <script>
    function changeBoxColor() {
      // 获取 .box 元素
      const box = document.querySelector('.box');

      // 随机生成颜色
      const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

      // 更新CSS变量的值
      box.style.setProperty('--box-bg-color', randomColor);
    }
  </script>
</body>
</html>

在这个示例中，‘.box‘元素的背景颜色通过‘--box-bg-color‘变量定义。当点击按钮时，JavaScript代码会更新‘.box‘元素的‘--box-bg-color‘变量，从而改变其背景颜色。

结合CSS动画和过渡效果动态更新样式

动态改变CSS变量的值不仅可以直接影响样式，还可以与CSS动画和过渡效果结合使用，创造出平滑的视觉效果。这使得样式变化更加流畅和自然。

动态改变变量与过渡效果

可以利用CSS过渡效果平滑地改变CSS变量的值。当CSS变量的值发生变化时，应用了过渡效果的属性会平滑地过渡到新的值。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS变量与过渡效果</title>

  <style>
    :root {
      --box-size: 100px;
    }

    .box {
      background-color: #e74c3c;
      width: var(--box-size);
      height: var(--box-size);
      transition: width 0.5s ease, height 0.5s ease;
    }
  </style>
</head>

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

  <button onclick="resizeBox()">改变盒子尺寸</button>

  <script>
    function resizeBox() {
      const root = document.documentElement;
      const newSize = '200px';
      root.style.setProperty('--box-size', newSize);
    }
  </script>
</body>
</html>

在这个示例中，‘.box‘元素的宽度和高度通过‘--box-size‘变量定义。当点击按钮时，‘--box-size‘变量的值被更新，并通过CSS过渡效果平滑地改变盒子的尺寸。

动态改变变量与动画效果

CSS动画允许更复杂的动态效果，例如，通过定义‘@keyframes‘动画来创建变化的样式。CSS变量的动态改变可以与‘@keyframes‘动画结合使用，生成更具动态效果的页面。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS变量与动画</title>

  <style>
    :root {
      --box-color: #3498db;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: var(--box-color);
      animation: changeColor 2s infinite;
    }

    @keyframes changeColor {
      0% {
        background-color: var(--box-color);
      }

      50% {
        background-color: #e74c3c;
      }

      100% {
        background-color: var(--box-color);
      }
    }
  </style>
</head>

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

  <button onclick="changeBoxColor()">改变动画颜色</button>

  <script>
    function changeBoxColor() {
      const root = document.documentElement;
      const newColor = '#' + Math.floor(Math.random()*16777215).toString(16);
      root.style.setProperty('--box-color', newColor);
    }
  </script>
</body>
</html>

在这个示例中，‘.box‘元素的背景颜色通过‘--box-color‘变量定义，‘@keyframes‘动画用于改变背景颜色。点击按钮时，‘--box-color‘变量的值被动态更新，导致动画中的颜色变化也随之改变。

总结

动态改变CSS变量是创建交互式和响应式网页设计的一个重要工具。通过JavaScript，开发者可以实时更新CSS变量的值，从而影响网页的样式和布局。结合CSS的过渡效果和动画，可以实现流畅的样式变化，使得用户体验更加自然和直观。掌握如何动态改变CSS变量，可以帮助开发者创建更为灵活和动态的网页效果，从而提升网页的视觉吸引力和用户体验。

下一篇：白骑士的CSS高级篇之CSS Grid布局进阶 4.1.1 网格容器与网格项