CSS attr(data) explained
CSS Detailed explanation of attr(data)
In CSS, we often use the attr() function to retrieve element attribute values. In addition to obtaining the values of native element attributes, we can also use the data- attribute to store custom data and retrieve this custom data value using attr(data-attribute name).
What are data attributes?
In HTML5, we can add custom data attributes to elements, that is, attribute names beginning with data-. These data attributes can be used to store any type of data, allowing us to manipulate them in JavaScript or CSS.
For example, we can add a custom data attribute to a button to store some additional information:
<button class="btn" data-user="12345">Click me</button>
In this example, we add a data-user attribute to the button and set its value to 12345.
Using attr(data) to Get the Data Attribute Value
In CSS, we can use attr(data-attribute-name) to get the value of an element’s data attribute. This allows us to dynamically change the style of the element based on the value of the data attribute through CSS.
.btn {
background-color: yellow;
}
.btn::before {
content: attr(data-user);
}
In this example, we style the button pseudo-element and use attr(data-user) to retrieve the value of the button’s data-user attribute and display it as content above the button.
Example Code
Let’s use an example to demonstrate how to use attr(data) to dynamically change the style of an element.
<!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>
In this example, we define two boxes with different data-type attribute values and change the background color of the boxes based on the value of the data-type attribute. We also use attr(data-text) to display the data-text attribute value as text within the boxes.
Running Results
When we load the above sample code in a browser, we see two boxes, one with a light green background and the text “Type 1″, and another with a light green background and the text “Type 2”.
Through this example, we can see that using attr(data) allows us to dynamically change styles based on the values of custom attributes of an element, achieving more flexible and diverse styling effects.
Conclusion
Using attr(data) in CSS allows us to more flexibly manipulate the values of custom attributes of an element and implement dynamic styling effects based on the attribute values. This provides a more powerful and convenient way to control styles and also allows us to better implement interactive effects in front-end development.