javascript - 当 classlist.add 在另一个元素上时，如何更改元素的样式？

Question

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

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%;
}

Answer 1

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>