1

如果这不起作用，我是一个真正的 javascript 初学者，所以我不知道为什么这不起作用。我使用 javascript 而不是 css 媒体查询的原因是因为图像正在使用 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 媒体查询都会起作用，但是一旦您单击前两个图标中的一个，它们就不会起作用，所以我认为 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 回答