使用 JavaScript 获取和设置 CSS 变量

要使用 JavaScript 获取和设置 CSS 变量，我们可以使用多种方法。getComputedStyle() 方法返回一个对象，其中包含应用于目标元素的所有样式。getPropertyValue() 方法用于从计算出的样式中获取所需的属性。setProperty() 方法用于更改 CSS 变量的值。

在本文中，我们有一个 div 和一个按钮，我们的任务是使用 JavaScript 获取和设置 CSS 变量。通过获取和设置 CSS 变量，我们将在点击按钮时更改 div 的背景颜色。

使用 JavaScript 获取和设置 CSS 变量的步骤

  • 我们使用了 div 和 button 标签来创建一个按钮，并将其包装在 div 容器内。
  • 我们使用了 container 类来设置 高度、背景颜色，并使用 justify-content 和 align-items 属性将按钮居中。 display 属性使 div 容器成为一个 弹性盒子。
  • 我们使用了 :root 伪类选择器在 CSS 中全局声明变量。我们全局声明了 --custom-bg-color 变量。
  • 我们使用了 getPropertyValue('--custom-bg-color') 来获取变量 custom-bg-color 的当前颜色值以确定背景颜色，并将其存储在 currColor 中。
  • 然后，我们使用了 if-else 条件语句来设置 div 的背景颜色。
  • 如果 currColor 不是黑色，那么我们使用 setProperty 方法将变量 --custom-bg-color 的值设置为黑色。它在点击时将背景颜色设置为黑色。

示例

这是一个实现上述步骤的示例，使用 JavaScript 获取和设置 CSS 变量以在点击按钮时更改 div 的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        :root {
            --custom-bg-color: rgb(138, 21, 21);
        }
        .container {
            display: flex;
            justify-content: center;
            height: 200px;
            align-items: center;
            background-color: var(--custom-bg-color);
        }
        button {
            padding: 15px;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <button onclick="toggle()">
            Change Theme
        </button>
    </div>
    <script>
        function toggle() {
            let root = document.documentElement;
            let currColor = getComputedStyle(root)
                           .getPropertyValue('--custom-bg-color');
            if (currColor === 'rgb(138, 21, 21)') {
                root.style.setProperty('--custom-bg-color', 'black');
            } else {
                root.style.setProperty('--custom-bg-color', 
                                        'rgb(138, 21, 21)');
            }
        }
    </script>
</body>
</html>

结论

在本文中，为了使用 JavaScript 获取和设置 CSS 变量，我们使用了 getComputedStyle()、getPropertyValue() 和 setProperty() 方法。我们使用了一个在点击按钮时更改背景颜色的示例。我们使用 getPropertyValue() 获取颜色值，并使用 setProperty() 设置 div 的新背景颜色。

更新于: 2024-10-28

13K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告