Tarakanev February 2016

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

I'm trying to use javascript to change the background color and font color of my navbar when someone clicks on the word 'portfolio'... i managed to change the background color but i cant change the font color.

Here is my 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 my 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 my javascript:

var menu = document.getElementById("barrademenu");  

portfolio.onclick = function() {
menu.style.background = '#000000';
menu.style.color= '#FFFFFF';
}   

Answers


Rounin February 2016

Rather than using javascript to change styles individually, one alternative approach - arguably a more efficient one - is to have class-based styles already declared in your css and then use classList.toggle in your javascript:

var portfolio = document.getElementById('portfolio');

function changeColors() {
var menu = document.getElementById('barrademenu');
menu.classList.toggle('changed-colors');
}  

portfolio.addEventListener('click',changeColors,false); 
.navbar {
    margin-bottom: 0;
    z-index: 9999;
    border: 0;
    font-size: 12px;
    line-height: 1.42857143;
    letter-spacing: 4px;
    border-radius: 0;
    background-color: #FFFFFF;
}

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

.navbar li a:hover {
    background-color: #CCCCCC;
}

.changed-colors {
background-color: #000000;
}

.changed-colors li a {
color: #FFFFFF;
}
<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="#home" id="home">HOME</a></li>
        <li><a href="#about" id="about">ABOUT US</a></li>
        <li><a href="#portfolio" id="portfolio">PORTFOLIO</a></li>
        <li><a href="#contact" id="contact">CONTACT US</a></li>
      </ul>
    </div>
  < 


Geoffrey Goh February 2016

Well the problem is that in your CSS, you have

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

While your javascript applies a colour to the parent nav element with id=barademenu

menu.style.color= '#FFFFFF';

This wouldn't work because the style applied to the child element overrides the style applied to the parent element.

Try this instead:

var navItems = menu.getElementsByTagName("a");
for (var i = 0; i < navItems.length; i++) {
    navItems[i].style.color= '#FFFFFF';
}


Derek S February 2016

.navbar li a, .navbar .navbar-brand {
      color: #000000 !important; <-- This is going to take priority
} 

I would also suggest using classes to set styles instead of directly adding them

CodePen Example: http://codepen.io/anon/pen/zrMwgp

Changing the color by applying CSS class

.active {
  color: red !important
} 

JS

document.getElementById("portfolio").className = "active"

EDIT

Thanks pointing that out as Stephen suggested:

document.getElementById("portfolio").classList.toggle("active")

Also using a wrapper for Javascript will make it easier such as Jquery.

Post Status

Asked in February 2016
Viewed 1,081 times
Voted 10
Answered 3 times

Search




Leave an answer