Javascript 函数在单击时更改属性（宽度）不工作

我开始在我的网站上添加一些JS，我对这个功能有问题。它不起作用：

html:

---

您可以使用按钮的ID尝试以下操作：

<img id="button1" src="button1.svg" alt="" onclick="buttonclick()">

---

它不起作用，因为读到

文档接口的getElementsByClassName方法返回 具有所有给定属性的所有子元素的类数组对象 类名

---

这意味着，它不是一个单一的对象。因此.style.setAttribute在代码中不起作用。

在HTML中，将图像更改为：

<img class="button1" src="button1.svg" alt="" onclick="buttonclick(this)">

---

getElementsByClassName

方法返回一个元素数组，因此要以找到的第一个元素为目标，需要以数组中的第一项为目标，如下所示：

功能按钮单击（）{
document.getElementsByClassName（“button1”）[0].style.width=“500px”；
}

img{背景：红色；高度：20px；显示：内联块；}

---

尝试使用它为我工作的id：

函数myFunction（）{ document.getElementById（“myBtn”）.style.width=“500px”

---

}

如果粘贴的内容与您正在执行的内容完全相同，则

setAttribute

和

（“样式”…

之间有一个不好的空格，这可能会破坏HTML中的代码：

<img id="button1" src="button1.svg" alt="" onclick="buttonclick()">

function buttonclick(){
    document.getElementById("button1").css("width", "500px");
}

<img class="button1" src="button1.svg" alt="" onclick="buttonclick(this)">

function buttonclick(element){
   element.style.width = "500px";
}