CODEWITHSUNDEEP
javascripthtmlcss
Jam3sn
Jam3sn

Reputation: 1087

How to use getElementId on and ID's Element

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>

Upvotes: 0

Views: 163

Answers (5)

Dinu Sorin
Dinu Sorin

Reputation: 215

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

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

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>

Upvotes: 2

Jack
Jack

Reputation: 9388

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

Upvotes: 1

A.B
A.B

Reputation: 20445

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

Upvotes: 0

orhanhenrik
orhanhenrik

Reputation: 1415

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"
}

Upvotes: 0

Related Questions