So ändern Sie die Farbe: Verwenden Sie die Schaltflächen
P粉111927962
2023-09-05 16:38:19
0
1
375
Kann ich in dieser Funktion weniger Codezeilen schreiben? Ich möchte, dass zwischen den beiden Farben gewechselt wird, wenn Sie eine der Tasten drücken. Die Funktion green() ist das genaue Gegenteil von red.
rot oder grün
function red() { document.getElementById("header").innerHTML = "red" document.getElementById('header').style.color = "red" document.getElementById('redButton').style.color = "white" document.getElementById('redButton').style.backgroundColor = "red" document.getElementById('greenButton').style.color = "black" document.getElementById('greenButton').style.backgroundColor = "grey" }
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
php入门教程之一周学会PHP4208681
JAVA 初级入门视频教程2360430
- Über uns Haftungsausschluss Sitemap
- Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！
// 缓存经常访问的元素 const headerElement = document.getElementById("header"); const redButton = document.getElementById("redButton"); const greenButton = document.getElementById("greenButton"); // 为整个文档添加事件监听器，利用事件委托 document.addEventListener("click", function(event) { const targetId = event.target.id; if (targetId === "redButton") { headerElement.innerHTML = "Red"; headerElement.style.color = "red"; redButton.classList.add("active-red"); greenButton.classList.remove("active"); } else if (targetId === "greenButton") { headerElement.innerHTML = "Green"; headerElement.style.color = "green"; greenButton.classList.add("active-green"); redButton.classList.remove("active"); } });.active { color: white; } .active-red { color: white; background-color: red; } .active-green { color: black; background-color: grey; }