How to use getElementId on and ID's Element


Tags: javascript,html,css

Problem :

Basically I have an Id's Element in CSS that i'm trying to interact with via JavaScript. So I want to use:

document.getElementById('dropMenu').style.opacity = '0';

on

#dropMenu li {
    opacity: 1;
}

but I cant work out how to interact with the li part specifically, is it even possible?

Thanks, James

HTML

<html>
<head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="./stylesheet.css" type="text/css" rel="stylesheet">
    <title>Index</title>
    <script>
        function dropMenu(){
            if (document.getElementById('dropMenu').style.height != '151px')
            {
                document.getElementById('dropMenu').style.height = '151px';
                document.querySelectorAll('dropMenu li').style.opacity = '1';
                console.log("showingObj");
            }
            else
            {
                document.getElementById('dropMenu').style.height = '0px';
                document.querySelectorAll('dropMenu li').style.opacity = '0';
                console.log("hideObj:");
            }
        }
    </script>
</head>
<body>
    <nav>
        <div id="mainMenu">
            <i class="fa fa-bars" onclick="dropMenu()"></i><p>Page Title</p>
        </div>
        <div id="dropMenu">
            <ul>
                <li>
                    <i class="fa fa-pencil fa-5x" id="dm1" style="background: #00bcd4;"></i>
                    <p style="background: #00acc1;">Projects</p>
                </li>
                <li>
                    <i class="fa fa-film fa-5x" id="dm1" style="background: #8bc34a;"></i>
                    <p style="background: #7cb342;">Media</p>
                </li>
                <li>
                    <i class="fa fa-camera-retro fa-5x" id="dm1" style="background: #ffc107;"></i>
                    <p style="background: #ffb300;">Photography</p>
                </li>
                <li>
                    <i class="fa fa-info-circle fa-5x" id="dm1" style="background: #e51c23;"></i>
                    <p style="background: #dd191d;">About Me</p>
                </li>
            </ul>
        </div>
    </nav>
</body>



Solution :

As an alternative to having to grab the li list, looping over it and programmatically setting the styles you could just add/remove a class on the dropMenu element by using the classList add/remove methods, or if supporting older browsers manipulate the className property

CSS

#dropMenu li {
    opacity: 1;
}

#dropMenu.hideli li {
    opacity: 0;
}

JS

//to add
document.getElementById("dropMenu").classList.add("hideli");
//to remove
document.getElementById("dropMenu").classList.remove("hideli");

//Quick and dirty could be improved
var ele = document.getElementById("dropMenu");
//to add
ele.className += " hideli";
//to remove
ele.className = ele.className.replace("hideli","");

Demo

setTimeout(function(){
    document.getElementById("dropMenu").classList.add("hideli");
},1000);

setTimeout(function(){
    document.getElementById("dropMenu").classList.remove("hideli");
},3000);
    
#dropMenu li {
   opacity:1;  
}

#dropMenu.hideli li {
   opacity:0;  
}
<div id="dropMenu">
   <ul>
     <li>Li 1</li>
     <li>Li 2</li>
     <li>Li 3</li>
     <li>Li 4</li>
   </ul>  
</div>


    CSS Howto..

    How to keep text in the middle of the screen even when re-sizing page in html/css

    how to show an arrow to the only li item that has sub-menu

    How to extract class names from a CSS selector?

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    How to have background color outside of radius border in a tbody in chrome?

    How to jump to a tab position (or equivalent) in html or css

    text-align:center doesn't work vertically in CSS, how can I get around this?

    how to highlight currently opened page link in css

    show/hide div on click

    How to add an icon to a button at the bottom right corner

    how to add css on click and remove it when they click close button [closed]

    How to keep floated element from affecting “text-align: center” text?

    How to vertically align the text into a coloured div using CSS?

    How does CSS height get applied to input fields?

    Pure JavaScript - how to add class to a class? Or change style in class

    Showing hidden divs element using jQuery show() not working in IE7

    CSS: How do I select CSS for all the
  • elements that do have not been styled yet?
  • How can i style textnodes that are direct children of a body-element?

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to set css font-size for text input from style sheet

    How to prevent rendering css when loading stylesheet from local storage?

    How to vertically center text with CSS?

    How do I get the tooltip background to extend or grow as I input more text?

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How to display print preview as same as the webpage using css?

    How to use CSS in Bootstrap to load a logo in the nav-brand class and have it centred?

    How to properly float this image verticaly aligned?

    html-css-how to make opeanable vertical menu [closed]

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    How to give shadow to a border