Question

Views

How to automatically detect an HTML tag if it contains a certain attribute like data-wow-delay? This is from wow.js.

What I want to do is that if an HTML tag contains the said attribute, it will automatically add the classes wow bounce in the tag.

<h1 data-wow-delay="0.2s">
    sample
</h1>

<h1
    class="wow bounce"
    data-wow-delay="0.2s"
>
    sample
</h1>

Note: there are a lot of different HTML tags that use this attribute.

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-07-13T03:26:54.694Z

Use Element.hasAttribute() to check whether the element contains the specified attribute:

const elem = document.querySelector('h1');

if(elem.hasAttribute('data-wow-delay')){
  elem.classList.add('wow', 'bounce')
}

.wow.bounce{
  background-color:grey;
}

<h1 data-wow-delay="0.2s">
  sample
</h1>

Alternatively, you can use querySelectorAll and the CSS attribute selector to select all elements with the attribute:

document.querySelectorAll('[data-wow-delay]').forEach(e => e.classList.add('wow','bounce'))

.wow.bounce{
  background-color:grey;
}

<h1 data-wow-delay="0.2s">
  sample
</h1>

<p data-wow-delay="0.1s">sample</p>