Javascript 在卷轴上交换图像

我想能够交换的标志图像从一个光明的图像到黑暗的图像时，我向上或向下滚动X个像素数。我也在Wordpress中这样做，而不删除图像源中的PHP。我只是在滚动时在PHP WordPress函数之后添加文件名。代码如下：

HTML

它添加了文件名，但每次我在浏览器中向上或向下滚动时，它都会做出这种奇怪的行为

  <img src="http://macbook-pro.local:5757/wp-content/themes/wordpress/img/logo_lighttext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg" alt="Logo" class="main-logo" id="main-logo"></img>

您应该了解工作原理。它连接，这意味着它将字符串组合在一起。每次滚动时，您都在不断构建越来越长的字符串。如果要替换src文本，只需使用

mainLogo.src='path'

var darkImage = '/img/logo_darktext.svg';
var lightImage = '/img/logo_lighttext.svg';
var mainLogo = document.getElementById('main-logo');
var directory = mainLogo.src;

function swapImageOnScroll() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    mainLogo.src = directory + lightImage;
  } else {
    mainLogo.src = directory + darkImage;
  }
}

window.addEventListener('scroll', swapImageOnScroll);

---

我认为最好使用内联svg，当滚动到深色部分时，将svg类更改为深色，当滚动到浅色部分时，输入它。并添加适当的样式。我需要它来保留此功能。我认为使用concat（）的原因是，据我所知，所有HTML属性值都是我认为的字符串，因为这两个字符串都是我将HTML值字符串连接到另一个字符串的字符串。我只是没想到onScroll事件会有这种奇怪的行为。还有其他方法保持PHP函数不变吗？@Ginz77当然，您可以像以前一样存储目录，然后只需将图像路径添加到它的末尾。我已经更新了答案。

  <img src="http://macbook-pro.local:5757/wp-content/themes/wordpress/img/logo_lighttext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_darktext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg/img/logo_lighttext.svg" alt="Logo" class="main-logo" id="main-logo"></img>

var darkImage = '/img/logo_darktext.svg';
var lightImage = '/img/logo_lighttext.svg';
var mainLogo = document.getElementById('main-logo');
var directory = mainLogo.src;

function swapImageOnScroll() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    mainLogo.src = directory + lightImage;
  } else {
    mainLogo.src = directory + darkImage;
  }
}

window.addEventListener('scroll', swapImageOnScroll);