1

従来、JavaScript を使用して要素にスタイルを適用できます。

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

しかし、同様の方法でメディアクエリ固有のスタイルを適用できますか? 私が話しているのはこれです：

body {
  color: red;
}

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

上記の @media 固有のスタイル。これを JavaScript を介してプログラムで要素に適用できますか? bodyたとえば、 CSS を指定せずに上記のスタイルを要素に適用したいとします。すべて JavaScript で行いたいと思います。これは可能ですか (クロスブラウザーの方法で)?

4

1 に答える 1

0

ウィンドウの読み込み時とサイズ変更時のウィンドウの幅を確認してください。基本的な考え方：

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();
于 2012-05-01T18:05:23.433 に答える