How to change CSS in media tag within @media only tags with jquery?

Question

I am making a webpage for an iphone and ipad, say I have the following CSS:

#somediv {
background-color: white;
}

@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
            #somediv {
                color:red;
            }       
        }

        @media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
            #somediv {
                color:green;
            }          
    }

I have two question: 1) How to make it such that I can use a jquery selector that changes all of those properties for somediv to have "color: blue"?

2) How do I make it such that only the orientation:portrait one is "color:blue"?

Answer 1

https://github.com/paulirish/matchMedia.js/

is a good option for making media queries in javascript.