使用JavaScript编辑CSS

Question

我有以下（简体）HTML：

<div id="topMenu">

            <div class="menu_wrapper">

                <div class="logo">

                </div>

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

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

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

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

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

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

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

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

#navMenu{
    display:none;
}

以及以下JavaScript：

function fnResponsiveMenu()
{
    var oNavMenu = document.getElementById('navMenu');
    var oDisplay = oNavMenu.style.display;

    if(oDisplay=="none")
    {
        oDisplay.style.display = "";
    }
}

问题是单击id="navMenu"没有将id="navMenu"的div设置为可见。

通过查看DOM资源管理器，我可以看到该元素设置为display：none，但是在调用JavaScript函数时，显示返回为“”。

我已经搜索了互联网，但据我所知，我正在正确地实施所有操作。

这与CSS有关吗？ 我有我看不到的明显错误，还是功能上缺少某些东西？

Answer 1

您那里有几个问题。

1. 您在多个元素上使用了相同的id 。 那是无效的。 标识符是标识符 ，它们必须是唯一的。 如果要将元素归为一组，请使用类。

2. 您正在查看Element#style对象的display属性，但是不会具有样式表应用的值。 它只会将值直接应用于元素。

3. oDisplay.style.display = ""; 应该是oNavMenu.style.display = ""; （元素的.style ，而不是.style上的.style ）-但这无法覆盖CSS。

您可以通过getComputedStyle （标准）或.currentStyle （仅限IE）获取元素的活动样式。

var element = /*...get the element...*/;
var currentStyle = element.currentStyle || getComputedStyle(element);
if (currentStyle.display === "none") {
    // ...
}

现场示例：

 setTimeout(function() { var element = document.querySelector(".hidden"); var currentStyle = element.currentStyle || getComputedStyle(element); if (currentStyle.display === "none") { element.style.display = "block"; } }, 500); 

 <div class="hidden">Has class hidden</div> 

但是更好的答案可能是删除类：

 setTimeout(function() { var classRex = /\\bhidden\\b/; var element = document.querySelector(".hidden"); if (classRex.test(element.className)) { element.className = element.className.replace(classRex, ''); } }, 500); 

 <div class="hidden">Has/had class hidden</div> 

Answer 2

所有元素的ID必须不同，例如：

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

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

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

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

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

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

Answer 3

正如@ketan所写，元素的ID应该是唯一的。 HTML具有非唯一性，但这是一个不好的做法。

您应该考虑在JavaScript中使用jquery ，然后可以使用css样式选择器选择所有元素，例如$(".navigation") ，然后一起更改所有元素。

例如，您可以轻松地将代码更改为一行： $(".navigation").hide() ，它将隐藏navigation类中的所有元素。

Answer 4

多合一代码可解决您的问题。
它在navList中显示所有隐藏的标签
尝试运行以下代码（@Alex）：

<!doctype HTML>
<html>
<head>
    <style type="text/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;   
            }

        #navList{
            display: none;
        }
    </style>
    <script type="text/javascript">
        function fnResponsiveMenu()
        {
            var oNavMenu = document.getElementById("navList");
            if(oNavMenu.style.display=="")
            {
                oNavMenu.style.display = "inline";
            }
        }
    </script>
</head>
<body>
    <div class="menu_wrapper">
        <div class="logo">
            <img></img>
        </div>

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

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

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

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

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

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

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

Answer 5

我也曾经遇到过同样的问题。 最简单的解决方案是使用jQuery选择器链接 。

在jquery中，您可以使用以下代码详细信息链接轻松访问任何字段

$('#id').attr('style') 

并使用以下代码设置该属性

$('#id').attr('style','')