CODEWITHSUNDEEP
javascriptcss
Dušanka Prvulovic
Dušanka Prvulovic

Reputation: 41

How can I change the style of an element when the classlist.add is on another element?

I want to change the size of an image when a button is clicked. I have following code:

HTML:

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

JS:

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

CSS: (how the .changeSize should look like:)

img {
    width: 20%;
}

Upvotes: 1

Views: 1241

Answers (3)

ZeroZipZilch
ZeroZipZilch

Reputation: 721

classList.add() adds a class to the element. So img.classList.add('changeSize'); adds the class changeSize to the image that you have selected, making the HTML for it look something like:

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

To make the image grow bigger with that class, you can use the CSS selector img.changeSize

The final code could look something like this:

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>

Upvotes: 1

Maxwell_Orr
Maxwell_Orr

Reputation: 81

you could try this:

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

the html for the image would be:

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

Add this CSS as well:

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

Upvotes: 1

Angrysheep
Angrysheep

Reputation: 422

Try adding a .changeSize class to your css:

.changeSize {
  width: 50%;
}

OR

img.changeSize {
  width: 50%;
}

Upvotes: 0

Related Questions