我对 javascript 一无所知,我在这里需要一些帮助。从这里和那里的资源中,我试图执行以下逻辑。
当浏览器的宽度小于 700px 时,所有具有“star-wars”类的图像都将删除该类。
$(window).resize(function() {
/*If browser resized, check width again */
if ($(window).width() < 700) {
function myFunction() {
var element = document.querySelectorAll('img.has-zoom');
element.classList.remove("has-zoom");
}
}
});
显然上面的代码是错误的。我需要你告诉我如何正确地写出上面的内容(如果这是正确的)。
最佳答案
document.querySelectorAll('img.has-zoom')
将返回 NodeList 而不是元素。
您需要循环遍历返回的列表或从中获取所需的元素,以从中提取classList
。
尝试:
window.addEventListener('resize', removeClass);
function removeClass() {
width = window.innerWidth || $(window).width();
if ( window.innerWidth < 700) {
var elements = document.querySelectorAll('img.has-zoom');
[].forEach.call(elements, function(el) {
el.classList.remove("has-zoom");
});
}
}
2 秒后删除类别的示例:
setTimeout(function() {
var elements = document.querySelectorAll('img.has-zoom');
[].forEach.call(elements, function(el) {
el.classList.remove("has-zoom");
});
}, 2000);
.has-zoom {
border: 3px solid yellow;
}
<img alt="Image 1" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b" class="has-zoom">
<img alt="Image 2" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b">
<img alt="Image 3" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b" class="has-zoom">
关于javascript - 在浏览器调整大小时从所有图像中删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59424772/