Toggle class on orientation change in javascript

Question

How can we toggle class of an element based on orientation of device.

Example:

<div class="landscape"></div>

@media (orientation: portrait) {
.landscape: {...}
}

I can change landscape css properties. but I want to avoid this.

Instead, I would like to change the class itself thus, it would look like

<div class="portrait"></div> // if orientation is portrait
<div class="landscape"></div> // if orientation is landscape

Any suggestions for this!

Note: Would accept answer for vue as well

Update: screen.orientation doesn't work on safari. solution should work on safari too.

thanks for your appretiatable answers.

Answer 1

Check out this code using matchMedia. But maybe I made a mistake somewhere in this code. But the essence and structure are correct.

window.matchMedia('(orientation: portrait)').addListener(function(m) {
       let div_class = document.querySelector('.landscape');
       if (m.matches) {
                div_class.className = 'portrait';
            } else {
                div_class.className = 'landscape';
            }
    });