CSS 从JavaScript访问CSS变量

在本文中，我们将介绍如何从JavaScript中访问CSS变量。CSS变量（也称为自定义属性）是在CSS中定义的变量，可以用于存储各种值，例如颜色、字体大小和边距等。使用CSS变量可以方便地在整个样式表中重用和修改属性值。

阅读更多：CSS 教程

使用getComputedStyle()方法访问CSS变量

要从JavaScript中访问CSS变量，可以使用getComputedStyle()方法。该方法返回应用在指定元素上的所有CSS属性的计算后的样式值。通过使用getPropertyValue()方法，我们可以获取指定CSS属性的值。

下面是一个简单的示例，展示如何从JavaScript中访问CSS变量：

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

<div class="box">Hello, CSS!</div>

<script>
    var box = document.querySelector('.box');
    var styles = getComputedStyle(box);
    var mainColor = styles.getPropertyValue('--main-color');

    console.log(mainColor); // 输出 blue
</script>

在上面的示例中，我们定义了一个CSS变量--main-color，它的值是蓝色。然后我们创建了一个拥有该CSS变量作为背景颜色的盒子。通过getComputedStyle()方法获取到计算后的样式值，并使用getPropertyValue()方法获取到了--main-color的值，即蓝色。

使用setProperty()方法修改CSS变量

除了从JavaScript中获取CSS变量的值，我们还可以使用setProperty()方法来修改CSS变量的值。该方法用于设置元素的CSS属性的值。下面是一个示例，演示了如何从JavaScript中修改CSS变量的值：

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

<div class="box">Hello, CSS!</div>

<script>
    var box = document.querySelector('.box');
    box.style.setProperty('--main-color', 'red');
</script>

在上述示例中，我们首先创建了一个带有CSS变量的元素，背景颜色使用了该变量。然后通过querySelector()方法选择该元素，并使用style.setProperty()方法将--main-color的值修改为红色。这将导致盒子的背景颜色从蓝色变为红色。

使用CSS变量的优势

使用CSS变量有许多优势。首先，它们可以让我们集中控制和修改样式。通过定义一个CSS变量，我们可以在整个样式表中重复使用该变量，并通过修改一个变量的值来更改所有使用了该变量的样式。

其次，CSS变量可以提高代码的可维护性。通过使用变量，我们可以更轻松地调整样式，并且不需要在整个样式表中手动更改每个实例的值。

此外，CSS变量还可以更好地支持主题切换。通过定义不同的变量集合，我们可以在不同的主题之间进行切换，而无需更改大量的CSS样式。

总结

在本文中，我们介绍了如何从JavaScript中访问CSS变量。我们使用getComputedStyle()方法获取CSS变量的值，并使用setProperty()方法修改CSS变量的值。通过使用CSS变量，我们可以更方便地重用和修改样式属性，提高代码的可维护性并支持主题切换。使用CSS变量使得我们能够更好地控制和调整样式，为我们的项目带来更多的灵活性和可扩展性。