How to use getElementId on and ID's Element

Question

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>

show us your thml code, where you define the id of that li. don't forget, id should be unique. — vaso123, Oct 28 '14 at 19:43
`li { background-color: rgba(0,0,0,0); }` See: [CSS 3 Opacity for List but not text](http://stackoverflow.com/questions/11635837/css-3-opacity-for-list-but-not-text) — Mr. Polywhirl, Oct 28 '14 at 19:44
Added the HTML. What I am trying to do it change the opacity of my 4 `li` items that are within my #dropMenu div. — Jam3sn, Oct 28 '14 at 19:52

Patrick Evans · Accepted Answer · 2014-10-28T20:09:47.970

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>

Jack · Answer 2 · 2014-10-28T19:58:31.940

Yes, this is possible, but requires some extra JavaScript

1) Using getElementById with getElementsByTagName

var parent = document.getElementById('dropMenu');
var children = parent.getElementsByTagName('li');

// Loop child elements here, using forEach...
Array.prototype.forEach.call(children, ...);

2) Using querySelectorAll

var children = document.querySelectorAll('#dropMenu li');

// Loop child elements here...
Array.prototype.forEach.call(children, ...);

3) If you're open to using jQuery, it's easily done (similar to querySelector)

$('#dropMenu li').each(...);

Within the forEach (or a standard forloop), you'll interact directly with the element.

For example. using a standard for loop:

for (var i = 0, len = children.length; i < len; i++) {
    children[i].style.opacity = 0;
}

Using forEach (if you don't mind compatibility issues) might look like this:

Array.prototype.forEach.call(children, function(el){
    el.style.opacity = 0;
})

@HashemQolami You're totally right and a total brainfart on my part. I've updated to reflect that (using Array.prototype.forEach instead) — Jack, Oct 28 '14 at 19:55

score 0 · Answer 3 · edited Oct 28 '14 at 19:49

0

in js you can write it as

var elems = document.querySelectorAll('#dropMenu li');

for(var index = 0; index < elems.length; index++) {
   elems[index].style.opacity = 0;
}

edited Oct 28 '14 at 19:49

Hashem Qolami

97,268
26
150
164

answered Oct 28 '14 at 19:44

A.B

20,110
3
37
71

No, you can't. You can do `document.querySelector(...)`.style.opacity` to style the first such element, but not `querySelectorAll` because it returns more than one element. – lonesomeday Oct 28 '14 at 19:45
@HashemQolami oops i forgot to loop through , edited – A.B Oct 28 '14 at 19:48

score 0 · Answer 4 · edited Oct 28 '14 at 20:52

0

Your getElementById('dropMenu') is ok, then you can add "sub-query" for all li elements, and scan it:

var dropmenu = document.getElementById('dropMenu');
var lis = dropmenu.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    lis[i].style.opacity = 0;
}

edited Oct 28 '14 at 20:52

Peter Krauss

13,174
24
167
304

answered Oct 28 '14 at 19:47

Dinu Sorin

215
2
6

Care to add some explanation or comment? Code-only answers are not too welcome here. Your answer was flagged for deletion, probably due to not even a tiny explanation or comment. – trejder Oct 28 '14 at 20:22

score 0 · Answer 5 · answered Oct 28 '14 at 19:47

0

Use querySelectorAll and loop through the items changing their style

var items = document.querySelectorAll('#dropMenu li');
for(var i=0;i<items.length;i++){
    items[i].style.opacity="1"
}

answered Oct 28 '14 at 19:47

orhanhenrik

1,407
8
11

How to use getElementId on and ID's Element

5 Answers5