Edit CSS using JavaScript

Question

I have the following (simplified) 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>

and the following 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;
}

and the following JavaScript:

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

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

The problem is that the div with id="navMenu" is not being set to visible when I click.

From looking at the DOM explorer, I can see the element is set to display:none, but when calling the JavaScript function, the display is coming back as "".

I have searched the internet, but as far as I can see I am implementing everything correctly.

Is this something to do with the CSS? Do I have an obvious error that I cant see, or is there something missing in the functionality?

Answer 1

You have a couple of issues there.

1. You're using the same id on more than one element. That's invalid. Identifiers are identifiers , they must be unique. If you want to classify elements together in a group, use a class.

2. You're looking at the display property of the Element#style object, but that won't have the value applied by a stylesheet. It will only have values directly applied to the element.

3. oDisplay.style.display = ""; should be oNavMenu.style.display = ""; (the element's .style , not .style on the string) — but that won't work to override the CSS.

You can get the active styles for the element via getComputedStyle (standard) or .currentStyle (IE-only)

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

Live example:

 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> 

But the better answer might well be to remove the class instead:

 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 must be different for all element like:

<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

As @ketan wrote, The ID of an element should be unique. HTML works with it being non-unique, but it's a bad practice.

You should consider using jquery in your javascript, then you can select all the elements with css style selectors, like $(".navigation") , and change them all together.

For example, you can easily change your code to the one line: $(".navigation").hide() which will hide all elements with the navigation class.

Answer 4

All in one code solves your problem.
It displays all the hidden tags in the navList
Try running this code ( @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

I've also faced the same issue once. The easiest possible solution is use jQuery selector link .

In jquery you can easily access any field using following code detail link

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

and set that attribute using following code

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