HTML5 Custom Attributes And How To Access Them Using JavaScript And CSS

🎁 Join my channel to get access to perks:

🧡 Hello All JavaScript Lovers Outhere!

Today you're going to learn about HTML5 custom attributes and how to access them using JavaScript and CSS.

HTML5 custom attributes (or data attributes) allow you to store extra information on HTML elements without the need to do any hacks to do so. such as non-standard attributes, or extra properties on DOM.

In this tutorial, I will show you how to properly create custom attributes for HTML elements.

Also you will learn how to access/read custom attributes with JavaScript using built-in methods like getAttribute() and setAttributes, and also read them through the dataset object.

You will also learn how to access/read custom (data) attributes with CSS, using the function attr(), also you will learn how to select elements in CSS using these custom attributes.

🕔 Timeline :
00:00:00 - Intro
00:00:17 - HTML Syntax
00:01:20 - JavaScript Access
00:04:30 - CSS Access

🌍 Social Media Links.

💲 Suppport the Channel

[mujeeb_biradar]

Your presentations are one of the best way of explanations i have seen so far.

[johnnydragovic]

I really liked the way the lessons are presented

[sanjaux]

Super helpful, definitely like the old get/set attribute it's much simpler

[alessandroformica]

This mini tutorial is perfectly explained. Thank you thank you.

[timedisplay]

how to make this element from xenforo?
<xf:data></xf:data>

and from blogger section element?
<b:section></b:section>

[kpm]

so do the data attributes with multi words have to be separated by hyphens and lowercase? and then can be accessed in javascript using .dot operator and camelCase???