如何解决更改类中所有元素的背景
我有一个div,当我单击它时,应将.counter类中的所有元素都变为红色,但此刻它什么也不做。我相信您必须先运行一个循环,然后再使用这种方式选择类宽度JS中的所有元素?
CSS
.counter {
width: 100px;
height:100px;
background-color:orange;
}
#btn {
background-color:aqua;
width:50px;
height:50px;
position:absolute;
left:200px;
top:10px;
}
HTML
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="myFunction()"></div>
JS
var myCounters = document.getElementsByClassName("counter")
for (var i = 0; i < myCounters.length; i++){
console.log(myCounters[i])
}
function myFunction() {
document.getElementsByClassName(i).style.backgroundColor = "red"
}
解决方法
您只需要循环并应用样式。您的代码部分正确,但是有些错误,请参阅最后的错误。
var myCounters = document.getElementsByClassName("counter")
function myFunction() {
for (var i = 0; i < myCounters.length; i++) {
console.log(myCounters[i])
myCounters[i].style.backgroundColor = "red"
}
}
.counter {
width: 100px;
height: 100px;
background-color: orange;
}
#btn {
background-color: aqua;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 10px;
}
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="myFunction()">some button</div>
var myCounters = document.getElementsByClassName(counter)
计数器应为字符串-类名
var i-0
这应该是var i = 0;
conole.log(myCounters [i])
错字-其console
document.getElementsByClassName(i).style.backgroundColor =“红色”
变量i
在myFunction
中不可访问-范围问题
function handleClick() {
var myCounters = document.getElementsByClassName("counter")
for (var i = 0; i < myCounters.length; i++) {
myCounters[i].style.backgroundColor = "red"
}
}
.counter {
width: 100px;
height: 100px;
background-color: orange;
}
#btn {
background-color: aqua;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 10px;
}
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="handleClick()"></div>
,
除了给出的答案外,我建议通过向元素添加类并通过CSS进行样式更改来应用样式更改。应用内联样式会提高性能。
function myFunction() {
var myCounters = document.getElementsByClassName("counter")
for (var i = 0; i < myCounters.length; i++) {
console.log(myCounters[i])
myCounters[i].classList.toggle('red');
//using '.toggle' will remove the class again upon clicking the button and re-add when clicking again,and so forth. Replace .toggle by .add to only add the class if that's your use-case.
}
}
然后在您的CSS中
.counter {
width: 100px;
height: 100px;
background-color: orange;
}
.counter.red {
background-color: red;
}
如果仅对页面上的几个元素执行此操作,则性能缺陷可以忽略不计。如果您要对很多元素进行此操作,建议您通过CSS进行。
,嗨,您可以在DOM列表(例如nodeList或HTMLCollection)上使用for / of迭代来完成此操作。因为所有最新版本的现代浏览器(Safari,Firefox,Chrome,Edge)都支持
function myFunction() {
let counters = document.getElementsByClassName("counter");
for(let counter of counters){
counter.style.backgroundColor = 'red';
}
}
.counter {
width: 100px;
height:100px;
background-color:orange;
}
#btn {
background-color:aqua;
width:50px;
height:50px;
position:absolute;
left:200px;
top:10px;
}
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onClick="myFunction()">
</div>
,
一个更简单的方法是拥有一个css变量。代码只需更改变量的值,使用该变量的任何类都会自动更新。
例如:
function myFunction(c) {
document.documentElement.style.setProperty("--counterbg",c);
}
:root {--counterbg: orange;}
.counter {
width: 100px;
height:100px;
background-color:var(--counterbg);
}
#btn {
width:100px;
height:50px;
position:relative;
display:inline;
}
<button id="btn" onclick="myFunction('red')">Red</button><button id="btn" onclick="myFunction('green')">Green</button><button id="btn" onclick="myFunction('blue')">Blue</button>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
该变量在STYLE标记的顶部和:root
元素上定义。 .counter样式使用var(--counterbg)
进行引用(这些变量必须以--
开头)。 js只需要更改变量的值即可。在此示例中,我完成了三个按钮,将变量更改为三种不同颜色之一。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。