Change more than 1 CSS value on click using Javascript?

Question

have a very basic page that I am working on that contains thumbnail images and a main image. When the thumbnail images are clicked I am using document.getElementById to change the main image. Easy to do but I now want to change my main image from landscape to portrait. This will mean that now when clicking the thumbnail I will not only need to change the main image but also the div tag dimensions. I am new to Javascript and was wondering if someone could give me a quick point in the right direction of how to go about this.

Thank you in advance for any help,

Margate

Answer 1

I would suggest adding/changing a CSS style class on the element and then configuring that class with all the necessary modifications. There's a lot you can do with just CSS.

Answer 2

You can either use a semi colon in your onclick event and add more javascript calls, or create a JavaScript function that will do all of your neccesary changes and call that method from your onclick event.

    function changeStuff(){
       document.getElementById("myThing").DoStuff()
       document.getElementById("myOtherThing").DoOtherStuff()
    }

    <div id="myThing">
        <img id="myOtherThing" onclick="cangeStuff();"></img>
    </div>