【问题标题】：How to change HTML AOS delay value using javascript or CSS如何使用 javascript 或 CSS 更改 HTML AOS 延迟值
【发布时间】：2020-11-05 07:34:34
【问题描述】：

第一次在这里寻求帮助，希望有一个简单的答案。我在我的网站中使用 AOS - Animate on Scroll 库，我希望能够根据屏幕宽度更改 aos 延迟值，因为我需要根据屏幕尺寸不同的延迟时间。

是否可以将下面的“1300”值称为“数字”，然后通过 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>

我没有找到解决此问题的方法。我尝试在 javascript 中使用 getElementById() 但只能设法更改 div 的内容而不是其中的值。

目前我的解决方法（如下）是为每个延迟长度设置重复的 div，然后使用“display:none;”我可以根据屏幕大小删除不需要的 div。这真的很痛苦，而且有点混乱，因为我想要很多延迟变化。

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

感谢任何帮助或想法。

【问题讨论】：

标签： javascript html css aos.js

【解决方案1】：

像Hugo Elhaj-Lanhsen 一样，您可以更改数据属性。我想根据视口大小添加如何做到这一点，在 JavaScript 中使用 Window.matchMedia 和 MediaQuery.addListener()。

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 tag，以便视口是设备的大小。

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

【讨论】：

非常感谢。这真的很好用。是否也可以使用相同的方法更改 data-aos="fade-in" 属性？试一试，但到目前为止没有运气：
function setFade(skillfade) { document.querySelector('.skill' ).setAttribute('data-aos', Skillfade) } const mqList = window.matchMedia("(max-width: 419px)") if (mqList.matches) { setFade(fade-left) }
是的，它应该可以工作。您基本上可以使用.setAttribute() 设置任何属性。在您的评论中，您没有将字符串传递给setFade 函数，也许您只是在评论中写错了，但它应该是setFade("fade-left") 而不是setFade(fade-left)。
啊，是的。现在都在工作。再次感谢您的帮助。

【解决方案2】：

属性

在 HTML 中，像 class="name" 这样的键值对被称为 attributes。 class、style 和 src 是属性的示例。

以data- 为前缀的属性称为data attributes。数据属性不同于直接在 HTML 中定义的普通属性，可以由程序员定义。这就是为什么您的库使用数据属性来设置延迟的原因。

改变属性

要设置属性的值，您可以使用Element.setAttribute(name, value)。在这种情况下，我们将获取元素并设置其 data-aos-delay 数据属性：

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

【讨论】：

谢谢雨果。这真的很有帮助。