html按钮点击改变颜⾊代码,HTMLCSSJS在单击时更改多个按
钮的颜⾊
nullvar level1 = ElementById("bar1");
var level2 = ElementById("bar2");
var level3 = ElementById("bar3");
var level4 = ElementById("bar4");
var level5 = ElementById("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; }
好看的css代码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;
}
Cat Dominates World
div {
background-color: none;
border: 0.5px solid black;
text-align: center;
display: inline-block;
cursor: pointer;
padding: 4px 24px;
}
Cat Dominates World
null
你好！ 我现在正在使⽤HTML/CSS制作5级条，并尝试改变多个按钮的颜⾊。 例如，单击第三个按钮，第⼀个/第⼆个/第三个按钮的颜⾊将更改为红⾊。 我从对⽅的回答中修复了，然⽽，由于Chrome扩展策略，内联实现是不允许的。 我制作了另⼀个js⽂件来运⾏代码，但它不起作⽤。
代码有问题吗？ 请给我反馈:)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。