CSS data-
CSS data-
In front-end development, CSS is a technology used to control the style and layout of web pages. In CSS, there are some special attributes called “data-” attributes. These attributes begin with “data-” and can store custom data within HTML elements. This data can be used to assist JavaScript in manipulating DOM elements or implementing other functions. This article will explain data- attributes in CSS and their usage in detail.
What are data- attributes?
Data- attributes are new attributes introduced in HTML5 and are used to store custom data. These attributes begin with “data-” and can be followed by any name. For example, we can add custom attributes such as data-id and data-name to HTML elements. The values of these attributes can be any type of data, such as strings, numbers, and objects.
Data- attributes are very useful in front-end development, especially when dealing with DOM manipulation. By storing data in data attributes, we can easily access and modify that data in JavaScript without having to pass it through the HTML document or global variables.
How to Use Data Attributes
Using data attributes is simple: simply add an attribute beginning with “data-” to an HTML element. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Attribute Example</title>
</head>
<body>
<div id="myElement" data-name="John" data-age="30"></div>
</body>
</html>
In the example above, we added two data-attributes to a div element: data-name and data-age. These attributes can store arbitrary values, such as strings, numbers, and so on.
Accessing data-attributes via JavaScript
Data-attribute values can be easily accessed and modified using JavaScript. The following example demonstrates how to use JavaScript to retrieve the data-attribute values of the div element in the example above:
var myElement = document.getElementById('myElement');
var name = myElement.dataset.name; // John
var age = myElement.dataset.age; // 30
console.log(name);
console.log(age);
In the above code, we first retrieve the div element with the id “myElement” using the getElementById() method. We then use the dataset property to access the element’s data-attributes and retrieve the values of data-name and data-age.
Modifying Data-Attribute Values
In addition to getting data-attribute values, we can also modify them using JavaScript. Here’s an example of how to modify the data-attribute values of the div elements in the example above:
myElement.dataset.age = 35;
In the code above, we use the dataset attribute and assign a new value to modify the value of the data-age attribute.
Using data-attributes for more functionality
Beyond storing simple values, we can also use data-attributes to implement more complex functionality. For example, we can store various information in a list and then filter, sort, or manipulate that information using JavaScript.
Here is an example showing how to use data-attributes to filter a list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Attribute Example</title>
<style>
.item {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="text" id="filterInput" placeholder="Enter filter">
<ul id="itemList">
<li class="item" data-color="red">Apple</li>
<li class="item" data-color="yellow">Banana</li>
<li class="item" data-color="green">Lettuce</li>
</ul>
<script>
var filterInput = document.getElementById('filterInput');
var itemList = document.getElementById('itemList');
var items = itemList.querySelectorAll('.item');
filterInput.addEventListener('input', function() {
var filter = filterInput.value.toLowerCase();
items.forEach(function(item) {
var color = item.dataset.color.toLowerCase();
if (color.includes(filter)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}); });
</script>
</body>
</html>
In the example above, we create a list of items containing names and colors and add a data-color attribute to each li element to store the color information. We then use an input field to filter these items, compare the input field value with the data-color attribute, and show or hide the items based on the filter criteria.
Summary
In this article, we introduced data attributes in CSS and their usage in detail. By using data attributes, we can easily store custom data in HTML elements and manipulate this data with JavaScript to achieve more complex functionality.