我想在单击按钮时更改图像的大小。我有以下代码:
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>