CSS 使用HTML数据属性作为CSS变量（例如text-shadow）

在本文中，我们将介绍如何使用HTML数据属性作为CSS变量来实现一些效果，例如text-shadow。

阅读更多：CSS 教程

什么是CSS变量

CSS变量（也称为自定义属性）是一种可以在CSS中定义和重用的值。它们以”–“为前缀，后面跟着一个标识符，如”–color”或”–fontSize”。我们可以在整个样式表中使用这些变量，并且可以通过使用var()函数引用它们。

使用数据属性作为CSS变量

我们可以使用HTML的数据属性（data-）来定义CSS变量，并在CSS中使用它们。首先，我们需要为HTML元素添加一个数据属性，如data-text-shadow，然后在CSS中使用它作为变量。

下面是一个使用数据属性作为text-shadow的例子：

<div data-text-shadow="1px 1px 1px rgba(0,0,0,0.5)">Hello World</div>

然后，在CSS中使用数据属性作为CSS变量：

div {
  text-shadow: var(--text-shadow);
}

这样，我们就可以通过修改data-text-shadow属性来改变元素的text-shadow效果。

示例：通过点击按钮改变text-shadow效果

通过使用数据属性作为CSS变量，我们可以通过交互来改变元素的text-shadow效果。下面是一个示例，点击按钮可以切换不同的text-shadow效果：

<style>
  div {
    font-size: 24px;
    text-shadow: var(--text-shadow);
    transition: text-shadow 0.5s;
  }

  .button {
    margin-top: 10px;
    padding: 5px;
    background-color: #333;
    color: white;
    cursor: pointer;
  }

  .button:hover {
    background-color: #555;
  }
</style>

<div id="text" data-text-shadow="1px 1px 1px rgba(0,0,0,0.5)">Hello World</div>

<div class="button" onclick="changeTextShadow()">Toggle Shadow</div>

<script>
  function changeTextShadow() {
    var text = document.getElementById("text");
    var currentShadow = text.getAttribute("data-text-shadow");

    if (currentShadow === "1px 1px 1px rgba(0,0,0,0.5)") {
      text.setAttribute("data-text-shadow", "3px 3px 3px rgba(0,0,0,0.5)");
    } else {
      text.setAttribute("data-text-shadow", "1px 1px 1px rgba(0,0,0,0.5)");
    }
  }
</script>

在上面的示例中，我们使用onclick事件和JavaScript函数来切换text-shadow的值。通过修改数据属性，我们可以实现按钮点击时text-shadow的变化。