覆盖element.style

Question

我正在尝试制作一个响应式网页，例如显示随屏幕尺寸而变化。

我有以下HTML：

            <div class="responsive_menu" id="resp_Menu" onClick="fnResponsiveMenu()">
            </div>

            <div class="nav_wrapper">
                <div class="navigation" id="navMenu1">
                    <a href="Home.aspx">Contact Us</a>
                </div>

                <div class="navigation" id="navMenu2">
                    <a href="Home.aspx">Information</a>
                </div>

                <div class="navigation" id="navMenu3">
                    <a href="Home.aspx">Venue Details</a>
                </div>

                <div class="navigation" id="navMenu4">
                    <a href="Home.aspx">Registration & Payment</a>
                </div>      

                <div class="navigation" id="navMenu5">
                    <a href="Home.aspx">Agenda</a>
                </div>

                <div class="navigation" id="navMenu6">
                    <a href="Home.aspx">Home</a>
                </div>

            </div>

以及响应.css中的以下内容：

.navigation {
    width:100%;
    background-color:#3171B7;
    border-bottom:1px solid #ffffff;
    margin:0;   
    text-transform:uppercase;
    font-size:16px;
    height:40%;
    padding-top:10px;   
    display:none;
}

以及style.css中的以下内容：

.navigation {
    float:right;
    margin:30px 0px 1px 0px;
    height:25px;
    width:100px;    
    display:block;
}


.navigation a
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    display:block;
    padding:0 5px;
    height:30px;
}

以及以下JavaScript：

var oNavChecker = 0;

function fnResponsiveMenu()
{
    if(oNavChecker == 0 )
    {
        var oNav1 = document.getElementById("navMenu1");
        oNav1.setAttribute('style', 'display:inline');

        var oNav2 = document.getElementById("navMenu2");
        oNav2.setAttribute('style', 'display:inline');

        var oNav3 = document.getElementById("navMenu3");
        oNav3.setAttribute('style', 'display:inline');

        var oNav4 = document.getElementById("navMenu4");
        oNav4.setAttribute('style', 'display:inline');

        var oNav5 = document.getElementById("navMenu5");
        oNav5.setAttribute('style', 'display:inline');

        var oNav6 = document.getElementById("navMenu6");
        oNav6.setAttribute('style', 'display:inline');

        oNavChecker = 1;
        return;
    }

    if(oNavChecker == 1 )
    {
        var oNav1 = document.getElementById("navMenu1");
        oNav1.setAttribute('style', 'display:none');

        var oNav2 = document.getElementById("navMenu2");
        oNav2.setAttribute('style', 'display:none');

        var oNav3 = document.getElementById("navMenu3");
        oNav3.setAttribute('style', 'display:none');

        var oNav4 = document.getElementById("navMenu4");
        oNav4.setAttribute('style', 'display:none');

        var oNav5 = document.getElementById("navMenu5");
        oNav5.setAttribute('style', 'display:none');

        var oNav6 = document.getElementById("navMenu6");
        oNav6.setAttribute('style', 'display:none');

        oNavChecker = 0;
        return;
    }

}

一切正常，并表现出我想要的。

我的问题是，一旦屏幕缩小，然后按下菜单按钮，例如当fnResponsiveMenu()被按下时：

按下以首先显示菜单

然后再按一次将其删除

然后屏幕回到宽分辨率，

navMenus不再显示。

我敢肯定这是因为CSS正在被javascript过度使用，例如：

oNav1.setAttribute('style', 'display:none');

那么，如何解决这个问题并获取style.CSS来覆盖JavaScript应用的更改？

如果无法做到这一点，那么有人可以建议我实现响应式菜单的替代方案吗？

Answer 1

我不能发表评论，没有足够的代表，所以我会在回答中问...

你读过这个吗？ 删除HTML元素的内联CSS

删除内联样式后，css文件中的默认样式将再次应用。