Home > Article > Web Front-end > How can we embed custom data attributes on all HTML elements?
How can we embed custom data attributes on all HTML elements?
- PHPzforward
- 2023-08-28 12:49:061272browse
In this article, we need to embed custom data attributes on all HTML elements. We can use the data-* attribute in HTML to achieve this.
In HTML, the data-* attributes are used to customize data that is private only to a web page or application. This attribute adds custom values to HTML elements.
The data-* attribute in HTML consists of two parts −
The attribute value can be any string.
Attribute names should contain only lowercase letters and must have at least one character after the prefix "data-".
This data is often used in JavaScript to improve user experience. The following is an example of embedding custom data attributes on HTML elements.
Example 1
In this example,
-
We have listed three (clothing) with custom data-id and
data-price data
Here, the data attributes are not visible to the user.
Although these values will not be visible to the user, these values will exist in the document.
<!DOCTYPE html>
<html>
<head>
<title>How do we embed custom data attributes on all HTML elements? </title>
</head>
<body>
<ul>
<li data-id="1" data-price="INR 1899">Shirt</li>
<li data-id="2" data-price="INR 2799">Pant</li>
<li data-id="3" data-price="INR 4599">Jacket</li>
</ul>
</body>
</html>
These values are not shown because we did not extract the custom properties we specified.
Example 2
In this example,
We’ve created four links with tags inside the HTML table.
Each element has a custom data-plyr-type attribute that contains a player name.
We used the onClick event to extract custom properties.
Whenever we click on the
<a></a>element, a JavaScript function extracts and displays the player's country name.
<!DOCTYPE html>
<html>
<head>
<script>
function showData(plyr) {
var players = plyr.getAttribute("data-plyr-type");
alert(plyr.innerHTML + " is a " + players + ".");
}
</script>
</head>
<body>
<h1>Cricketers!</h1>
<p>Click on a player to see which team he belongs to:</p>
<table border=2 px;>
<caption>Players</caption>
<tr>
<td onclick="showData(this)" id="owl" data-plyr-type="Afganistan player">Rashid khan</td>
<td onclick="showData(this)" id="owl" data-plyr-type="Pakistan player">Babar azam</td>
</tr>
<tr>
<td onclick="showData(this)" id="salmon" data-plyr-type="England player">Jos Buttler</td>
<td onclick="showData(this)" id="salmon" data-plyr-type="Australia player">Steve smith</td>
</tr>
<tr>
<td onclick="showData(this)" id="tarantula" data-plyr-type="India player">Jasprit bumrah</td>
<td onclick="showData(this)" id="tarantula" data-plyr-type="West indies player">Jason holder</td>
</tr>
</table>
</body>
</html>
As we can see in the output, when the user clicks on the table data of any cricket player, the custom attribute is extracted and the country name of the specific player is displayed.
The above is the detailed content of How can we embed custom data attributes on all HTML elements?. For more information, please follow other related articles on the PHP Chinese website!