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

您可以尝试以下方法：

Button.onclick = function () {
var img= document.getElementById('yourImgId');
if(img && img.style) {
    img.classList.add("newStyle");
}
};

图片的html为：

<img src="src" id="yourImgId"/>

也添加此CSS：

.newStyle {
width: 100px;
height: 200px;
}

Answer 2

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>

Answer 3

尝试将.changeSize类添加到CSS：

.changeSize {
  width: 50%;
}

OR

img.changeSize {
  width: 50%;
}

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

3 个答案: