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

编程问答 2022-06-04

问题描述

第一次在这里寻求帮助，希望对此有一个简单的答案。我正在使用AOS-网站上的Scroll库中的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;
    }
  }

感谢任何帮助或想法。

解决方法

类似于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">
,

属性

在HTML中，像class="name"这样的键值对称为 LIPS: Scheme based lisp。 class，style和src是属性的例子。

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

更改属性

要设置属性的值，可以使用data attributes。在这种情况下，我们将获取元素并设置其data-aos-delay数据属性：

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