尝试更改图像大小时出现非常奇怪的 Javascript 错误答案

【问题标题】：Getting very weird Javascript error when trying to change image size尝试更改图像大小时出现非常奇怪的 Javascript 错误
【发布时间】：2020-09-16 16:52:05
【问题描述】：

所以这是控制台中的错误：

未捕获的类型错误：无法读取未定义的属性“样式”。

var image = document.getElementsByClassName("zoomImg");
var trigger = document.getElementsByClassName('woocommerce-product-gallery__trigger'); 

    function enlarge() {
        image.style.width = "1000px"; //The error happens here
        image.style.height = "900px";
    }

    window.onload = function() { trigger.addEventListener("mouseover", enlarge());
    }

【问题讨论】：

What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?的可能重复
这有什么奇怪的？你得到了很多元素s，所以你需要遍历它们
我很抱歉，但我没有找到太多关于此的内容。谢谢托马斯。

标签： javascript dom-events

【解决方案1】：

在你的第一行，你得到了多个元素，所以在这种情况下是一个元素数组。在您的放大功能中，您假设变量“图像”是 1 个元素，即使它实际上是一个元素数组（即使可能只有 1 个）

如果只有 1 个，并且您确定这一点，那么您可以执行以下操作：

image[0].style.width = "1000px";

但是，如果你假设只有 1 个结果，你最好给元素一个 id 而不是一个类，并使用：

document.getElementById('zoomImg'); 而不是document.getElementsByClassName('zoomImg');

那么将只有一个元素，而不是一个元素数组。

【讨论】：