0

Web サイトにレスポンシブ レイアウトを実装しようとしています。応答性の主な要因は、ウィンドウのサイズ変更イベントで起動する JavaScript です。ウィンドウの幅が特定のしきい値を超えると、アクティブにしたいスタイルシートを有効にし、他のスタイルシートを無効にします。これは、スタイルシートを有効/無効にする方法です

var styles = document.styleSheets;

for var(x in styles) {
  if (isThisTheRightSheet(x)) {
    styles[x].disabled = false;    
  } else {
    styles[x].disabled = true;
  }
}

これは、Internet Explorer 8 を除くすべての場所で機能します (9 はまだテストしていません)。8 では、プロパティは更新されますが、表示は更新されません。したがって、関数をトリガーするウィンドウのサイズを変更します。表示は変わらないのですが、コンソールでdisabledプロパティを確認すると正しく更新されています。また、「リンク」ノードでjqueryのprop関数を使用してみましたが、同じ動作になります。

ie8でこの動作を実現するにはどうすればよいですか? ie9 で異なる場合は、その情報を含めてください。

4

2 に答える 2

2

document.styleSheets[0].disabled=true;

これにより、IE7 および 8 の最初のスタイルシートが無効になります (6 については覚えていないでください)。

isThisTheRightSheet (x)メソッドが間違ったシートを無効にしている可能性があります。

また、for(styleSheets の x) は、シート以外のプロパティを反復処理している場合があります。styleSheets の長さプロパティを使用することもできます。

 for(var i=0,L=styles.length;i<L;i++){}
于 2012-09-19T17:09:46.927 に答える
0

html条件を使用します。

<!--[if IE 8]>
   <link rel="stylesheet" type="text/css" href="css/style_ie8.css" />
<![endif]-->
<!--[if IE 9]>
   <link rel="stylesheet" type="text/css" href="css/style_ie9.css" />
<![endif]-->
于 2012-09-19T16:31:00.417 に答える