CSS attr(data)详解|极客教程

CSS attr(data)详解

在CSS中，我们经常会使用attr()函数来获取元素的属性值。除了获取元素原生属性的值，我们还可以使用data-属性来存储自定义的数据，并通过attr(data-属性名)来获取这些自定义数据值。

什么是data属性

在HTML5中，我们可以为元素添加自定义的data属性，即以data-开头的属性名。这些data属性可以用来存储任意类型的数据，以便我们在JavaScript或CSS中进行操作。

举个示例，我们可以为一个按钮添加一个自定义的data属性来存储一些额外的信息：

<button class="btn" data-user="12345">Click me</button>

在这个示例中，我们为按钮添加了一个data-user属性，并设置其值为12345。

使用attr(data)获取data属性值

在CSS中，我们可以使用attr(data-属性名)来获取元素的data属性值。这样我们就可以通过CSS样式来根据不同的data属性值来实现样式的动态变化。

.btn {
    background-color: yellow;
}

.btn::before {
    content: attr(data-user);
}

在这个示例中，我们为按钮的伪元素添加了样式，并使用attr(data-user)来获取按钮的data-user属性值，并将其作为内容显示在按钮上方。

示例代码

让我们通过一个示例来演示如何使用attr(data)来动态改变元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr(data) Demo</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        text-align: center;
        line-height: 200px;
        font-size: 24px;
    }

    .box[data-type="1"] {
        background-color: lightgreen;
    }

    .box[data-type="2"] {
        background-color: lightcoral;
    }

    .box::before {
        content: attr(data-text);
    }
</style>
</head>
<body>

<div class="box" data-type="1" data-text="Type 1"> </div>
<div class="box" data-type="2" data-text="Type 2"> </div>

</body>
</html>

在这个示例中，我们定义了两个具有不同data-type属性值的盒子，并根据不同的data-type属性值来改变盒子的背景颜色。我们还使用attr(data-text)来将data-text属性值作为文本内容显示在盒子内。