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
Post a Comment