Let's discuss some important features of data attributes from HTML and pointer-e
On any element in HTML, if there is an attribute name that starts with
data- it is a data attribute. Data attributes are custom attributes added to elements in HTML. There are several cases you want to use data attributes for an element.
When you have some extra info that doesn't need to be seen by users, you can use data attributes for it. These extra information carried by data attributes can be access through CSS or JavaScript.
Let's take an example.
<div>
<div class='color' data-color="red" data-info="This is the demo for data attributes"></div>
</div>
___________________
.color {
position: relative;
width: 100px;
height: 100px;
background:rgb(33, 132, 33);
}
.color::after {
content: attr(data-color) ':' attr(data-info); // **data attributes
// opacity: 0;
transition: 1s transform;
position: absolute;
left: 80px;
background:rgb(107, 4, 4);
width: 200px;
height: 50px;
color:white;
}
.color:hover::after {
transform: scale(1.1)
}
//javaScript changed the dataset to yellow
.color[data-color='yellow']:hover::after {
background-color: yellow;
color: red;
}
CSS can access data attributes in its generated content in pseudo classes, such as
.color::after {
content: attr(data-color) ':' attr(data-info);
}
Or for styling the element that data attribute belong to:
div[data-color='red'] {
background: red;
}
The extra information stored by data attributes can also be access by JavaScript using dataset. Note the naming convention: for
data-student-id="1" javaScript's dataset name should be
element.dataset.studentId aka in camelCase.
For this project, here is the scripts:
const red = document.querySelector('.color');
red.dataset.color = 'yellow';
red.dataset.info = 'Javascript just changed the info.'
To see the code in action on CodePen:
See the Pen
html data attributes example by Susan G (@Koo8)
on CodePen.
Now let's discuss the 'pointer-events' of CSS and consider this scenario, when you have a few
divs with each hugging an
i tag for a font awesome icon image, e.g. like this:
<div class="control control-1 active-btn" data-id="home"><i class="fas fa-home"></i></div>
<div class="control control-2" data-id="about"><i class="fas fa-user"></i></div>
<div class="control control-3" data-id="portfolio"><i class="fas fa-briefcase"></i></div>
<div class="control control-4" data-id="blogs"><i class="fas fa-newspaper"></i></div>
<div class="control control-5" data-id="contact"><i class="fas fa-envelope-open"></i></div>
These icons are supposed to be clicked and to trigger other part of the website to react.
Each data-id is targeting a specific section of the page to react. So when these icons are clicked, we need to get the dataset from the click event.
However, the icon is wrapped inside a div, only the div has carried extra information through the data-id, the click event has an event.target property which in turn has the dataset attribute. If a user clicked on the icon, the icon will be the target of the event, if you use 'event' for receiving the dataset, you may fail due to the intervention of the icons.
For preventing this to happen, we should set the icon CSS with pointer-events:none;. In this way, we can successfully block the webpage from detecting the clicks on icons but rather only register the clicks on the whole div element.
Another way around is to use div as the element from where we can use div.dataset.id for retrieving the id data, this way, we should add event listener to the div element, then proceed with the programming, without the event variable in the function.
