JavaScriptを使用してMedia Query固有のスタイルをHTMLエレメントに適用できますか？

Question

伝統的に、あなたが要素にスタイルを適用するためにJavaScriptを使用することができます。

document.body.style.color = "red"; 

しかし、あなたは同様の方法でメディアクエリの特定のスタイルを適用することができますか？私が話しているのはこれです：

body { 
    color: red; 
} 

@media only screen and (max-width : 320px) { 
    body { 
    color: blue; 
    } 
} 

上記のメディア固有のスタイルです。これは、JavaScriptを介してプログラムで要素に適用できますか？たとえば、CSSを指定せずに上記のスタイルをbody要素に適用したいとします。 JavaScriptですべてをやりたいこれは可能ですか（クロスブラウザーの方法で）？

Answer 1

ウィンドウの読み込み時とサイズ変更時の幅を確認します。基本的なアイデア：

function resized() { 
    var myWidth = 0, 
     myHeight = 0, 
     color = "red"; 
    if(typeof(window.innerWidth) == 'number') { 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
    } 

    if (myWidth <= 320) { 
     color = "blue"; 
    } 
    document.body.style.color = color; 
} 
window.onresize = resized; 
resized();