交换图像文件并将 css class 添加到使用 JS 滚动的 img 标签

Question

我想交换 10px 卷轴上的图像文件，随着图像交换，我还想交换 css class。我能够获得用于交换图像文件的脚本，但是向 img 标签添加 class 不起作用。 setAttribute 不起作用的原因是什么？

JS:

<script>
      window.onscroll = function() {
        growShrinkLogo()
      };

      function growShrinkLogo() {
        var Logo = document.getElementById("Logo")
        if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
          $('.navbar .navbar-brand img').attr('src','images/logo-sm.png').setAttribute('class', 'smlogo');
        } else {
          $('.navbar .navbar-brand img').attr('src','images/logo.png').setAttribute('class', 'lgclass');
        }
      }
      </script>

Answer 1

setAttribute 是元素上的本机方法，而不是 jQuery。在处理 jQuery 个对象时使用 addClass() and removeClass() 来达到这个目的。

Answer 2

.setAttribute() 是一种 JavaScript 方法，在这些行中，您使用 jQuery 结构来切换 src 属性值，所以为什么不使用 jQuery toggleClass()?

您的代码改编：

<script>
  window.onscroll = function() {
    growShrinkLogo()
  };

  function growShrinkLogo() {
    var Logo = document.getElementById("Logo")
    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
      $('.navbar .navbar-brand img').attr('src','images/logo-sm.png').toggleClass('smlogo').toggleClass('lgclass');
    } else {
      $('.navbar .navbar-brand img').attr('src','images/logo.png').toggleClass('lgclass').toggleClass('smlogo');
    }
  }
</script>

Answer 3

我想您已经知道 setAttribute 对您不起作用，因为它特定于 DOM 元素。

您可以设置两个属性，即 src 和 class 到 'attr' 函数不使用任何附加函数，如 addClass 或 toggleClass 因为 'attr' 函数接受多个值。

您可以参考以下代码片段-

$('.navbar .navbar-brand img').attr({'src':'images/logo-sm.png','class':'smlogo'});

交换图像文件并将 css class 添加到使用 JS 滚动的 img 标签

Swapping image file and adding css class to a img tag on scroll with JS

javascript

html

css

scroll

setattribute