我一直在用我的代码来改变使用香草JS(没有JQuery)滚动的标志。
我从我的devtool得到的是这个错误:-
未捕获的DOMException: Failed to execute 'add' on 'DOMTokenList:提供的令牌('[object HTMLImageElement]')包含HTML空格字符，这在令牌中无效。在{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>
对于当前的代码，有两个问题。
传递给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
document.querySelector返回一个HTML元素，您试图将其添加到另一个元素的类列表中。这不起作用，因为classList期望字符串(CSS类)，你通过bigLogo和smallLogo给它HTML元素。