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

问题描述

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

感谢任何帮助或想法。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)