javascript - 重写 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>

以及 responsive.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

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

你读过这个吗？ Remove inline css of an HTML elements

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