السلام عليكم

CSS

@media only screen and (max-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 30%;
    }
}
@media only screen and (min-width: 768px) {
    #grandImg{
        right: 20%;
        bottom: 5%;
    }
}

JavaScript

var button_v = document.getElementById("v");

أريد عند الضغط على الزر button_v أن يتغير كود CSS أعلاه إلى:

@media only screen and (max-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 5%;
    }
}
@media only screen and (min-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 5%;
    }
}

وعند إعادة الضغط على الزر يعود كود CSS إلى ما كان عليه

كود CSS موجود في ملف خارجي