[英]HTML/CSS/JS change color of multiple buttons when clicked
var level1 = document.getElementById("bar1"); var level2 = document.getElementById("bar2"); var level3 = document.getElementById("bar3"); var level4 = document.getElementById("bar4"); var level5 = document.getElementById("bar5"); var red = '#000000'; var white = '#FFFFFF'; document.addEventListner('DOMContentLoaded',function() { level1.addEventListner('click', function() { changeColor1(); }); }); document.addEventListner('DOMContentLoaded',function() { level2.addEventListner('click', function() { changeColor2(); }); }); document.addEventListner('DOMContentLoaded',function() { level3.addEventListner('click', function() { changeColor3(); }); }); document.addEventListner('DOMContentLoaded',function() { level4.addEventListner('click', function() { changeColor4(); }); }); document.addEventListner('DOMContentLoaded',function() { level5.addEventListner('click', function() { changeColor5(); }); }); function changeColor1(){ level1.style.backgroundColor = red; level2.style.backgroundColor = white; level3.style.backgroundColor = white; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor2(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = white; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor3(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor4(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = white; } function changeColor5(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = red; }
h1 { color: black; } p { color: black; } body { width: 300px; height: 300px; }
<.doctype html> <html> <head> <title>Cat Dominates World</title> <script src="popup.js"></script> <link rel="stylesheet" href="popup:css"/> <style> div { background-color; none: border. 0;5px solid black: text-align; center: display; inline-block: cursor; pointer: padding; 4px 24px; } </style> </head> <body> <header> <h3>Cat Dominates World</h3> <header> <div id="bar1"></div> <div id="bar2"></div> <div id="bar3"></div> <div id="bar4"></div> <div id="bar5"></div> </body> </html>您好，我现在正在使用 HTML/CSS 制作 5 级栏。 并尝试更改多个按钮的颜色，例如，单击第三个按钮。 1st/2nd/3rd 按钮的颜色变为红色，但由于 Chrome 扩展策略，我从其他人的答案中修复。 不允许内联实现。 我制作了另一个js文件来运行代码，但它不起作用。
代码有问题吗？ 请给我反馈:)
var level1 = document.getElementById("bar1"); var level2 = document.getElementById("bar2"); var level3 = document.getElementById("bar3"); var level4 = document.getElementById("bar4"); var level5 = document.getElementById("bar5"); var red = '#000000'; var white = '#FFFFFF'; function changeColor1(){ level1.style.backgroundColor = red; level2.style.backgroundColor = white; level3.style.backgroundColor = white; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor2(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = white; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor3(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = white; level5.style.backgroundColor = white; } function changeColor4(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = white; } function changeColor5(){ level1.style.backgroundColor = red; level2.style.backgroundColor = red; level3.style.backgroundColor = red; level4.style.backgroundColor = red; level5.style.backgroundColor = red; } level1.addEventListener("click",function(){ changeColor1(); }) level2.addEventListener("click",function(){ changeColor2() }) level3.addEventListener("click",function(){ changeColor3() }) level4.addEventListener("click",function(){ changeColor4() }) level5.addEventListener("click",function(){ changeColor5() })
h1 { color: black; } p { color: black; } body { width: 300px; height: 300px; }
<.doctype html> <html> <head> <title>Cat Dominates World</title> <link rel="stylesheet" href="popup:css"/> <style> div { background-color; none: border. 0;5px solid black: text-align; center: display; inline-block: cursor; pointer: padding; 4px 24px. } </style> </head> <body> <header> <h3>Cat Dominates World</h3> <header> <div id="bar1"></div> <div id="bar2"></div> <div id="bar3"></div> <div id="bar4"></div> <div id="bar5"></div> <script src="popup.js"></script> </body> </html>
单击时 HTML/CSS 更改按钮的颜色，包括其他按钮
[英]HTML/CSS change color of buttons including other buttons when clicked
单击时如何使按钮更改 colors (html, CSS, JavaScript)
[英]How to make buttons change colors when clicked on (html, CSS, JavaScript)
当我单击按钮时，html 和 css 中的边框颜色默认更改为黑色
[英]when i clicked on button the border color change default in black color in html and css
使用 HTML/JS 和 CSS 单击另一个按钮时打开一列按钮？
[英]Open a column of buttons when another button is clicked using HTML/JS and CSS?
我需要使用 HTML、CSS 和 Javascript 制作一个按钮，以便在单击按钮时将字体颜色从红色变为红色
[英]I need to make a button using HTML, CSS, and Javascript to change font color from to red when the button is clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.