我想改變裏面的元素使用javascript裏的元素的字體顏色

-2

我想使用JavaScript來改變我的導航欄的背景顏色和字體顏色，當有人點擊單詞'組合'...我設法改變背景顏色，但我不能改變字體顏色。我想改變裏面的元素使用javascript裏的元素的字體顏色

這裏是我的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>

這裏是我的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; 
}

這裏是我的javascript：

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

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

來源

2016-02-08 Tarakanev

您在這裏缺少一些javascript，並且經驗法則是創建一個jsfiddle或類似的代碼編輯器，以複製該問題供人們查看。無論如何，顏色被應用到菜單上，雖然問題是'.navbar li a'覆蓋了它。你可以嘗試的是將'.navbar li a'的顏色設置爲繼承.navbar li a {color：inherit;}'這樣，它應該總是獲取其父對象的顏色。 –

而不是設置'menu.style。顏色「在被點擊的項目上設置了一個類，例如'

'。這更簡單，只需更改CSS即可更改選定的項目樣式，無需重新編碼。順便說一句，使用'！important'強烈不鼓勵;它存在於_User_樣式表中。如果你「需要」「重要」，那麼你的CSS有問題。 –

而不是使用javascript單獨改變風格，一個替代方法 - 可以說是更有效的一種 - 是基於類的風格已經聲明d在css，然後在javascript使用classList.toggle：

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> 
 
    </div> 
 
</nav>

來源

2016-02-08 23:06:31 Rounin

那麼問題是，在你的CSS，你有

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

雖然你的JavaScript應用顏色來父導航元素id=barademenu

menu.style.color= '#FFFFFF';

這不起作用，因爲應用於子元素的樣式會覆蓋應用於父元素的樣式。

試試這個：

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

來源

2016-02-08 23:07:04

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

我也建議使用類來設置樣式，而不是直接將它們添加

CodePen例子：http://codepen.io/anon/pen/zrMwgp

通過應用CSS改變顏色類

.active { 
    color: red !important 
}

個

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

編輯

感謝指出了這一點斯蒂芬建議：

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

而且使用Javascript的包裝會更容易，如Jquery。

來源

2016-02-08 23:13:14

'.className =「active」'將刪除'＃portfolio'元素上的任何類，並且只給它「active」類。 'element.classList.toggle（「active」）'更好，因爲它不會破壞可能已經在元素上的類。您可以添加和刪除單個類。 –

我想改變裏面的元素使用javascript裏的元素的字體顏色

回答

相關問題