0

由于菜单对于较低的分辨率来说太大了，我删除了不太重要的按钮....但这在 mozilla 和 IE 中不起作用？

JavaScript

  <script>
        if(screen.availWidth<=1345)
        {var r1=document.getElementById("rem1"); r1.remove();}

        if(screen.availWidth<=1255)
        {var r2=document.getElementById("rem2"); r2.remove();}
    </script>

HTML

<li id='rem1'><a href=''id='pad2'>Resources</a></li>
<li id='rem2'><a href='' id='pad2'>Help</a></li>
4

2 回答 2

3

screen.availwidth属性似乎可以正常工作，但作为替代方案，您可以使用document.body.clientWidth。要删除您可以使用的元素，r1.parentNode.removeChild(r1); 而不是 .remove() 方法，但出于您的目的，我建议您在此处调整 display 属性： 

window.onload = window.onresize = function () {
    var r1 = document.getElementById("pad1");
    var r2 = document.getElementById("pad2");
    r2.style.display = (document.body.clientWidth <= 1345) ? 'none' : 'list-item';
    r1.style.display = (document.body.clientWidth <= 1255) ? 'none' : 'list-item';
}

jsfiddle：代码+全屏

于 2013-08-10T12:31:52.737 回答
0

我相信您是在测量文档的客户端宽度（可用的可用空间）之后。然后你可以使用：

document.documentElement.clientWidth

您可以在此处找到有关此主题的更多信息：

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

于 2013-08-10T10:56:59.983 回答