时间戳

首页 > 解决方案 > 使用 vanilla JS 更改滚动上的徽标

javascript - 使用 vanilla JS 更改滚动上的徽标

问题描述

我一直坚持使用我的代码来更改使用 Vanilla JS（无 JQuery）滚动时的徽标。

我从我的 devtool 得到的是这个错误：-

未捕获的 DOMException：无法在 'DOMTokenList' 上执行 'add'：提供的令牌（'[object HTMLImageElement]'）包含 HTML 空格字符，这些字符在 tokens.at {localhost} 中无效

谁能发现我的代码哪里出错了？

const bigLogo = `<img src="images/redsbaby.svg" alt="Logo" />`;
const smallLogo = `<img src="images/r.svg" alt="Logo" />`;

window.addEventListener("scroll", () => {
    const currentLocation = window.pageYOffset;
    if(currentLocation <= 0){
        document.getElementsByClassName('.div-logo').innerHTML = smallLogo;
    } else {
        document.getElementsByClassName('.div-logo').innerHTML = bigLogo;
    }
})

<html>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="div-logo flex-col justify-center items-center order-1 mx-16 mt-2 md:-mt-1 sm:-mt-0.5 xs:mx-10 xs:-mt-0.5">
   <img src="images/redsbaby.svg" alt="Logo" class="big-logo md:hidden sm:hidden xs:hidden" />
   <img src="images/r.svg" alt="Logo" class=" small-logo hidden md:block sm:block xs:block" />
</div>
</html>

标签： javascript

解决方案

鉴于当前的代码，有两个问题。

传递给getElementsByClassName方法的选择器字符串参数不需要.类名的前缀（我们这里只按类选择）。

另一件事是，此方法不会返回单个元素。

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).

如果页面上有多个.div-logo元素，您将需要遍历它们以innerHtml单独设置。

const logoDivs = document.getElementsByClassName('div-logo');
for (let i = 0; i < logoDivs.length; i++;) {
   logoDivs[i].innerHTML = smallLogo; // or bigLogo 
}

如果只有一个.div-logo元素，只需使用document.querySelector.

document.querySelector('.div-logo').innerHTML = smallLogo; // or bigLogo

推荐阅读