我想在单击按钮时更改图像的大小。我有以下代码:

HTML:

<img id="pizzaImage" src="img/pizza.png" alt="pizza">


JS:

var pizzaImage = document.getElementById('pizzaImage');
Button.onclick = function () {
    pizzaImage.classList.add('changeSize');
};


CSS :(。changeSize的外观应为:)

img {
    width: 20%;
}

最佳答案

classList.add()向该元素添加一个类。因此,img.classList.add('changeSize');将类changeSize添加到您选择的图像中,使其HTML看起来像这样:

<img src="URL" class="changeSize" />


为了使图像在该类中变得更大,可以使用CSS选择器img.changeSize

最终代码如下所示:



document.querySelector("#changeImgSizeBtn").addEventListener('click', function () {
    var img = document.querySelector("#imgID");
    img.classList.add('changeSize');
});

img {
  max-width: 150px;
}

img.changeSize {
  max-width: 300px;
}

<img src="https://i.imgur.com/FrVmtJl.jpg" alt="cat img" id="imgID" />
<br />
<button id="changeImgSizeBtn">Change image size</button>

10-05 20:54
查看更多