HTML Custom Data Attributes
Tags: html, css, javascript
Published: 2020-08-12 05:51:51

Custom html data attributes allow us to expend the available native attributes of DOM elements. Custom data attributes can be used for DOM manipulations, as DOM selectors and more.

### HTML

This is how we attach custom data attributes to HTML tags:

```xml
<div id="gallery-container" data-columns="3">
   ...
</div>
```

In our CSS we can use this attribute in 2 ways: as a CSS selector or as a value to the  `content`  attribute of a pseudo element (`::before`  or  `::after`).

### Data Attribute as CSS Selector

Using data attributes as CSS selectors is very easy. Simply use it as you would with a native attribute and specify different value options:

```css
#gallery-container {
  max-width: 900px;
  margin: auto;
  padding: 15px;
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

#gallery-container[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

#gallery-container[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}
```

### Data Attribute in Pseudo Elements

In this case you can use a custom data attribute to set the  `content`  attribute of a pseudo element with the  `attr()`  CSS function.

So, in your html:

```xml
<div class="test-div" data-text="Programing is fun"></div>
```

And in our CSS:

```css
.test-div::after {
  content: attr(data-text);
}
```

### JS

With JS we have 2 main ways of getting and setting custom attributes. The first way is to use the  `element.getAttribute(attr)`,  `element.setAttribute(attr)`  and  `element.hasAttribute(attr)`  functions. The second way is to use the  `element.dataset`  property.

The following is how you would get, set and check for attributes the  `element.getAttribute(attr)`  way.

Here is our html again:

```xml
<div id="gallery-container" data-columns="4">
   ...
</div>
```

And, JS:

```javascript
const $galleryContainer = document.getElementById("gallery-container");
// hasAttribute()
console.log($galleryContainer.hasAttribute("data-columns")); // output: true
// getAttribute()
console.log($galleryContainer.getAttribute("data-columns")); // output: 4
// setAttribute()
$galleryContainer.setAttribute("data-columns", 3);
console.log($galleryContainer.getAttribute("data-columns")); // output: 3
```

And this is how we would do that with  `element.dataset`  property:

```javascript
const $galleryContainer = document.getElementById("gallery-container");
// Get Attribute
console.log($galleryContainer.dataset.columns); // output: 4
// Set Attribute
$galleryContainer.dataset.columns = 3;
console.log($galleryContainer.dataset.columns); // output: 3
```

A quick note about casing: If your attribute has more than one word in it like:  `data-test-attribute`  you will  `camelCase`  it like this in your JS.

So, In your HTML:

```xml
<div id="gallery-container" data-columns="4" data-test-attribute="1">
   ...
</div>
```

And In your JS:

```javascript
const $galleryContainer = document.getElementById("gallery-container");
// Get Attribute
console.log($galleryContainer.dataset.testAttribute); // output: 1
// Set Attribute
$galleryContainer.dataset.testAttribute = 3;
console.log($galleryContainer.dataset.testAttribute); // output: 3
```

Read more about data attributes here:

👉  [https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

✍ This post was originally published on my blog, for more posts:
[https://yossiabramov.com/](https://yossiabramov.com/)