Question

如果这不起作用，我是一个真正的初学者，当涉及到JavaScript时，我不知道为什么这不起作用。我使用javascript而不是css媒体查询的原因是因为使用javascript打开和关闭图像，并且一旦调用css，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媒体查询都会起作用，但是一旦您单击其中一个前两个图标，它们就不会，所以我想到一个javascript解决方案可能是要走的路，但不幸的是我的尝试无法正常工作。

Answer 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/

Answer 2

你用，jquery？你链接到你的jquery文件了吗？如果没有，你应该写：

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

或者尝试

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

Answer 3

试试这个：

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';
}

尝试显示：无或显示：内联取决于使用javasrcript的屏幕宽度

3 个答案: