html - I want to change the font color of the li elements inside a div using javascript -


i'm trying use javascript change background color , font color of navbar when clicks on word 'portfolio'... managed change background color cant change font color.

here html:

<nav class="navbar navbar-default navbar-fixed-top" id="barrademenu">    <div class="container">     <div class="navbar-header">     <a class="navbar-brand" href="#">logo</a>     </div>     <div class="collapse navbar-collapse" id="mynavbar">       <ul class="nav navbar-nav navbar-right">         <li><a href="#about" id="home">home</a></li>         <li><a href="#services" id="about">about us</a></li>         <li><a href="#portfolio" id="portfolio">portfolio</a></li>         <li><a href="#pricing" id="contact">contact us</a></li>       </ul>     </div>   </div> </nav>  

here's css:

.navbar {     margin-bottom: 0;     z-index: 9999;     border: 0;     font-size: 12px !important;     line-height: 1.42857143 !important;     letter-spacing: 4px;     border-radius: 0;     background-color: #ffffff; }  .navbar li a, .navbar .navbar-brand {       color: #000000 !important; }  .navbar li a:hover {     background-color: #cccccc !important; } 

here's javascript:

var menu = document.getelementbyid("barrademenu");    portfolio.onclick = function() { menu.style.background = '#000000'; menu.style.color= '#ffffff'; }    

well problem in css, have

.navbar li a, .navbar .navbar-brand {     color: #000000 !important; } 

while javascript applies colour parent nav element id=barademenu

menu.style.color= '#ffffff'; 

this wouldn't work because style applied child element overrides style applied parent element.

try instead:

var navitems = menu.getelementsbytagname("a"); (var = 0; < navitems.length; i++) {     navitems[i].style.color= '#ffffff'; } 

Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -