¿Cómo detectar automáticamente una etiqueta HTML si contiene un determinado atributo como data-wow-delay ? Esto es de wow.js.
Lo que quiero hacer es que si una etiqueta HTML contiene dicho atributo, agregará automáticamente las clases wow bounce en la etiqueta.
<h1 data-wow-delay="0.2s"> sample </h1> <h1 class="wow bounce" data-wow-delay="0.2s" > sample </h1>Nota: hay muchas etiquetas HTML diferentes que usan este atributo.
Use Element.hasAttribute() para verificar si el elemento contiene el atributo especificado:
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> Alternativamente, puede usar querySelectorAll y el selector de atributos CSS para seleccionar todos los elementos con el atributo:
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>