HTML - Data attributes

About

Data (Key value) can be included for processing by a script using the data-*=“” attributes.

Example

How to use data attribute in Css property value

<p data-length="2m" >Beyond The Sea</p>
p::before {
   content: attr(data-length) " ";
}

where attr is the css attribute function

  • Output:

Dom Select

With an attribute selector, you can select the nodes with a certain value.

<ul>
  <li data-type="blue">Blue</li>
  <li data-type="red">Red</li>
</ul>
*[data-type="blue"] {
   color: blue;
}
  • Output:

Dom Manipulation

  • Code:
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>
var article = document.getElementById('electriccars');
console.log("Columns: "+article.dataset.columns); // "3"
console.log("Has Columns As Property ?: "+article.dataset.hasOwnProperty("columns")); // true
console.log("Has Columns As Property With In operator ?: "+("columns" in article.dataset)); // true
console.log("Index number: "+article.dataset.indexNumber); // "12314"
console.log("Parent: "+article.dataset.parent); // "cars"
  • Output:

Add/Remove

As this is a normal attribute, you add or remove it via the standard DOM attribute manipulation function.

Is set

  • the in operator can check if a data attribute is present
'keyname' in element.dataset

Event

  • Javascript that check on each element clicked in the body if there is a data attribute (ie data-echo) and log it's result to the console.
document.body.addEventListener('click', (event) => {
    if (event.target.dataset.echo) {
        console.log('The target element has a data-echo attribute. Hello '+event.target.dataset.echo+' !')
    } else {
       console.log('The target element has NOT a data-echo attribute')
    }
})
  • The two buttons to click
<p><button data-echo="you">Click Me ! (To see that there is a data attribute, that output the `you` value)</button></p>
<p><button>Click Me ! (To see that there is no data attribute on this button)</button></p>
  • Output:

Documentation / Reference





Discover More
CSS - Attr function (attribute)

The attr function select the value of an attribute where:
Boxdim
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
Devtool Chrome Event Listener
DOM - Event Object (Callback function parameter)

A event callback function may have a parameter specified with a name such as event, evt, or simply e. This is the event object, and it is automatically passed to the callback function to provide extra...
HTML - Span element

The span element is a generic wrapper for phrasing content that by itself does not represent anything. Span doesn't have explicit attributes. Span is then handy to use: as placeholder for Javascript...
How to store and use data in HTML

This article shows where you can store and use data
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
On Off Automaton
UI - Toggle or Collapse (Display or hide elements) (On/Off)

Display or hide UI components. “”|“”O |OSPAimes/status/907487309142126592Twitter Generally toggle activity, when using a responsive design appears to what is called breakpoints: Display...



Share this page:
Follow us:
Task Runner