Как изменить значение задержки HTML AOS с помощью javascript или CSS

Question

Первый раз обращаюсь за помощью здесь, надеясь, что на это есть простой ответ. Я использую библиотеку AOS - Animate on Scroll на своем веб-сайте и хочу иметь возможность изменять значение задержки aos в зависимости от ширины экрана, поскольку мне нужно разное время задержки в зависимости от размера экрана.

Можно ли назвать значение "1300" чем-то вроде "number", а затем изменить это значение с помощью медиа-запросов в CSS или 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>

Мне не удалось найти решение этой проблемы. Я попытался использовать getElementById() в javascript, но мне удалось изменить только содержимое div, а не его значение.

На данный момент мой обходной путь (ниже) состоит в том, чтобы иметь дубликаты div для каждой длины задержки, а затем использовать 'display:none;' Я могу удалить ненужные в зависимости от размера экрана. Это настоящая боль и немного беспорядок, так как есть довольно много вариантов задержки, которые я хочу.

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

Цените любую помощь или идеи.

Answer 1

Как и Hugo Elhaj-Lahsen Лансен, вы можете изменять атрибуты данных. Я хотел бы добавить, как это сделать в зависимости от размера области просмотра, используя Window.matchMedia и MediaQuery.addListener () в 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
    }
})

И не забудьте добавить метатег HTML viewport, чтобы область просмотра была размером с устройство.

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

Answer 2

Атрибуты

В HTML пары "ключ-значение", например class="name"известны как атрибуты. class, style и src являются примерами атрибутов.

Атрибуты с префиксом data-известны как атрибуты данных. Атрибуты данных, в отличие от обычных атрибутов, которые определены непосредственно в HTML, могут быть определены программистом. Вот почему ваша библиотека использует атрибут данных для установки задержки.

Изменение атрибутов

Для установки атрибута значения, вы можете использовать element.setAttribute(имя, значение). В этом случае мы бы получили элемент и установили его data-aos-delay атрибут данных:

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