1

これがうまくいかない場合、私はJavaScriptに関しては本当に初心者なので、なぜこれがうまくいかないのかわかりません。CSS メディア クエリの代わりに JavaScript を使用している理由は、画像が JavaScript でオンとオフを切り替えられており、css が呼び出された後に js をオーバーライドしていないように見えるためです。

<script type="text/javascript">
    if (window.innerWidth > 1440) {
        ('#art1').style.display = 'inline';
        ('#art1_lores').style.display = 'none';
    }
    else {
        ('#art1').style.display = 'none';
        ('#art1_lores').style.display = 'inline';
    }

これが私がいる場所です： http://www.dillonbrannick.com/redesign

したがって、右側のアイコンは左側の画像に影響し、何かがクリックされる前にcssメディアクエリが機能しますが、最初の2つのアイコンのいずれかをクリックすると機能しないため、おそらくjavascriptソリューションが最適であると考えました残念ながら、私の試みはうまくいきません。

4

3 に答える 3

1

window.onresizeコードをハンドラーにラップする必要があります。たとえば、次のようにします。

var art1 = document.getElementById('art1'),
    art1Lores = document.getElementById('art1_lores');

window.onresize = function() {
    if (window.innerWidth > 440) {
        art1.style.display = 'inline';
        art1Lores.style.display = 'none';
    } else {
        art1.style.display = 'none';
        art1Lores.style.display = 'inline';
    }
}

window.onresize();

また、必ず DOM クエリをキャッシュしてください。ノードを何度も再選択すると、パフォーマンスが低下します。

http://jsfiddle.net/9J3cg/

于 2013-08-04T13:15:12.573 に答える
0

jquery を使用しますか? jquery ファイルにリンクしましたか? そうでない場合は、次のように書く必要があります。

  document.getElementById('art1').style.display = 'none';

または多分試してみてください

   document.getElementById("art1").style.display = 'none';
于 2013-08-04T13:09:06.020 に答える
0

これを試して：

var element = document.getElementById('art1');

if (window.innerWidth > 1440) {
    element.style.display = 'inline';
    element.style.display = 'none';
}
else {
    element.style.display = 'none';
    element.style.display = 'inline';
}
于 2013-08-04T13:09:07.160 に答える