如何使用 javascript 或 CSS 更改 HTML AOS 延迟值

Question

First time seeking help on here, hoping there is a simple answer for this. I am using AOS - Animate on Scroll library in my website and I want to be able to change the aos delay value based on the screen width as I need different delay times depending on screen size.

Is it possible to call the below “1300” value something like “number” and then have that value changed by media queries in either CSS or javascript?

        <div class="skill" data-aos="fade-in" data-aos-delay="1300">
            <div class="icon-container">
                <img src="images/pencilruler.gif" alt="">
            </div>
            <h1>Graphic Design</h1>
            <p>
                Custom designs for screen and print. From logo designs and corporate branding, to adverts and packaging.
            </p>
        </div>

I have have had no luck finding a solution to this. I tried using getElementById() in javascript but could only manage to change the content of the div and not a value within it.

At the moment my workaround (below) is to have duplicate divs for each delay length and then by using 'display:none;' I can remove the unneeded ones based on screen size. This is a real pain and a bit messy as there is quite a few delay variations that I want.

  @media screen and (max-width : 419px){
   .skill-desktop{
    display:none;
    }
  }

Appreciate any help or ideas.

Answer 1

Like Hugo Elhaj-Lanhsen anwsered you can change the data attributes. I would like to add how to do that depending on the viewport size, using Window.matchMedia and MediaQuery.addListener() in JavaScript.

const mqList = window.matchMedia("(max-width: 419px)")
// If media query matches on load
if (mqList.matches) {
    setDelay(400) // using Hugo's function
}
// If media query matches after resize
mqList.addListener(function(mql) {
    if (mql.matches) {
        setDelay(400) // using Hugo's function
    }
})

And make sure to add the HTML viewport meta tag so the viewport is the size of the device.

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

Attributes

In HTML, the key-value pairs like class="name" are known as attributes . class , style and src are examples of attributes.

Attributes prefixed with data- are known as data attributes . Data attributes, unlike normal attributes which are defined in HTML directly, can be defined by the programmer . This is why your library uses a data attribute in order to set the delay.

Changing attributes

To set an attribute's value , you can use Element.setAttribute(name, value) . In this case, we would get the element and set its data-aos-delay data attribute:

function setDelay(number) {
  document.querySelector('.skill').setAttribute('data-aos-delay', number)
}