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?

oDisplay.style.display = "" should be oNavMenu.style.display = "" I guess ? — Hacketo
– Hacketo, Commented Mar 16, 2015 at 10:31
@Hacketo: There is that. :-) But the comparison will also fail. — T.J. Crowder
– T.J. Crowder, Commented Mar 16, 2015 at 10:37

T.J. Crowder · Accepted Answer · 2015-03-16 10:39:11Z

3

You have a couple of issues there.

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.
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.
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>

edited Mar 16, 2015 at 10:39

answered Mar 16, 2015 at 10:33

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Thank you, that almost worked, but it only made 1 of the elements visible and the rest stay hidden, am I missing something?

T.J. Crowder Over a year ago

@Alex: The example above just picks one element. To change them all, you'll want querySelectorAll (which returns a list) and a loop over the list.

ketan · Accepted Answer · 2015-03-16 10:32:26Z

0

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>

answered Mar 16, 2015 at 10:32

ketan

19.4k42 gold badges68 silver badges107 bronze badges

1 Comment

T.J. Crowder Over a year ago

While true, it doesn't relate to the issue with the element not becoming visible. One of them should have.

ShaharB · Accepted Answer · 2015-03-16 10:37:32Z

0

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.

answered Mar 16, 2015 at 10:37

ShaharB

1868 bronze badges

Comments

Asif Mehmood · Accepted Answer · 2015-03-16 11:28:50Z

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>

Shibaji Chakraborty · Accepted Answer · 2015-03-16 10:42:38Z

-1

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','')

answered Mar 16, 2015 at 10:42

Shibaji Chakraborty

753 bronze badges

Collectives™ on Stack Overflow

Edit CSS using JavaScript

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related