所以，我試圖讓我的這些導航鏈接在我點擊一個按鈕時改變它的顏色，但它似乎不起作用。
<ul class="nav-links">
<li id = link><a href="#">Home</a></li>
<li id = link><a href="#">Projects</a></li>
<li id = link><a href="#">About</a></li>
<li id = link><a href="#">Contacts</a></li>
</ul>
<label class="toggle">
<input type="checkbox" class="check">
<span class="slider" onclick="dark()"></span>
</label>
我試過做這個腳本，但它仍然不起作用
const text = document.querySelector(".logo");
const body = document.querySelector("body");
const banner = document.querySelector(".L-banner");
const navLinks = document.getElementById("#link");
function dark(){
text.style.color = "#fff";
body.style.background = "#000";
banner.style.color = "#fff";
for(var i = 0; i < navLinks.length; i ){
navLinks[i].style.color = "#fffff";
}
}
uj5u.com熱心網友回復：
不能為多個元素賦予相同的 ID，并且querySelector只選擇單個元素。
要選擇所有鏈接，可以使用querySelectorAll
document.getElementById('button').addEventListener('click', changeColor);
function changeColor() {
const links = [...document.querySelectorAll('.nav-links li a')];
links.forEach(link => link.style.color = "cornflowerblue");
}<ul class="nav-links">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
<button id="button">Change link color</button>uj5u.com熱心網友回復：
你應該把它改成這個
const navLinks = document.querySelectorAll("#link a");
也不要忘記修復html
<ul class="nav-links">
<li id="link"><a href="#">Home</a></li>
<li id="link"><a href="#">Projects</a></li>
<li id="link" ink><a href="#">About</a></li>
<li id="link" ink><a href="#">Contacts</a></li>
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472197.html
標籤：javascript dom