Javascript 根据javasrcript屏幕的宽度，尝试显示：无或显示：内联

如果这不起作用，我是一个真正的javascript初学者，所以我不知道为什么这不起作用。我之所以使用javascript而不是css媒体查询，是因为图像是用javascript开关的，而且css似乎不会在调用js后超越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';
    }

如果（window.innerWidth>1440）{
（“#art1”）.style.display='inline'；
（'art1'u lores'）。style.display='none'；
}
否则{
（“#art1”）.style.display='none'；
（“#art1_lores”）.style.display='inline'；
}

这就是我的处境：

---

因此，在点击任何东西之前，右边的图标会影响左边的图像，css媒体查询会起作用，但一旦你点击前两个图标中的一个，它们就不会起作用，所以我认为javascript解决方案可能是可行的，但不幸的是，我的尝试没有起作用。

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

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

或者试试看

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

---

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

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

或者试试看

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

试试这个：

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

试试这个：

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

---

您应该将代码包装到

窗口.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查询，一次又一次地重新选择节点会降低性能

---

您应该将代码包装到

窗口。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查询，一次又一次地重新选择节点会降低性能

---

我是否可以添加另一个条款，说明如果同时显示“art1”和“art1知识”：无以不应用窗口。onresize条款？我不确定是否理解，像这样<代码>如果（art1.style.display='none'&&art1.style.display='none'）返回；if（window.innerWidth>440）{…。我做了

window.onresize=function（）{if（art1.style.display=='inline'| | | art1Lores.style.display=='inline'）{**上面的代码**}其他{art1.style.display='none'；art1Lores.style.display='none'}

我是否可以添加另一个子句，说明如果'art1'和'art1_lores'都是display:none不应用window.onresize子句？不确定我是否理解，像这样？

if（art1.style.display='none'&&art1.style.display='none'）返回；if（window.innerWidth>440）{…

。我做了

window.onresize=function（）{if>（art1.style.display=='inline'| | art1Lores.style.display==='inline'）{**上面的代码**}其他{art1.style.display='none'；art1Lores.style.display='none'；}