如何在JavaScript中使用.getelementsbyclassname改变背景颜色?

Question

无论我怎么尝试，我都做不到。如果我用.getElementById，它可以工作…但我需要针对多个divs，所以我需要使用.getElementsByClassName。

到目前为止我写的是:

function changeBgColor(color){
document.getElementById("background1").style.background = color;
}

function changeBackground(color){
document.getElementsByClassName("pls-work").style.background = color;
}

#background1{
background: #c0c0c0;
padding: 50px;
color: #fafafa;
}
.background2{
background: #ff7f50;
padding: 20px;
}

.background3{
background: #555;
padding: 20px;
}

<h4>First example</h4>
<div id="background1"><p>My background color will change.</p></div>
<button onclick="changeBgColor('#222');">This function will work, no problem</button>

<br><br>

<h4>Second example</h4>

<div class="background3 pls-work"><p>My background color and my sibling's won't.</p></div>

<div class="background2 pls-work"><p>I am the sibling</p></div>
<button onclick="changeBackground('#222');">This will not work</button>

我一直在到处寻找，但我找不到一个他们使用class而不是id。

如果有人告诉我我做错了什么，我将不胜感激。

Answer 1

Please Try With this，

首先在变量中获取该元素，并在其上循环。

function changeBackground(color){
var elements = document.getElementsByClassName("pls-work")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=color;
}
}

Answer 2

调用document.getElementsByClassName("pls-work")返回一个包含多个元素的HTMLCollection，而不是单个元素。您需要遍历集合并为每个元素设置style属性。

参见JS:使用Array.forEach迭代getElementsByClassName的结果

Answer 3

getElementsByClassName方法返回一个集合(NodeList)对象，参见这里的文档。要做你想做的事，你必须做以下事情:

function changeBackground(color) {
let elements = document.getElementsByClassName("pls-work")
for (let i = 0; i < elements.length; i++) {
elements.item(i).style.background = color
}
}

关于如何遍历这个集合的更多信息，请参阅上面列出的文档。

Answer 4

getElementsByClassName返回元素列表，因此有两种方式

1。在javascript中像下面这样提到索引值

function changeBgColor(color){
document.getElementById("background1").style.background = color;
}

function changeBackground(color){
document.getElementsByClassName("pls-work")[0].style.background = color;
document.getElementsByClassName("pls-work")[0].style.background[1] = color;
}

#background1{
background: #c0c0c0;
padding: 50px;
color: #fafafa;
}
.background2{
background: #ff7f50;
padding: 20px;
}

.background3{
background: #555;
padding: 20px;
}

<h4>First example</h4>
<div id="background1"><p>My background color will change.</p></div>
<button onclick="changeBgColor('#222');">This function will work, no problem</button>

<br><br>

<h4>Second example</h4>

<div class="background3 pls-work"><p>My background color and my sibling's won't.</p></div>

<div class="background2 pls-work"><p>I am the sibling</p></div>
<button onclick="changeBackground('#222');">This will not work</button>

2. 对特定类的元素进行迭代，并为其添加背景色

Answer 5

getElementsByClassName返回一个"类似数组的对象"的元素，你需要迭代-而不是getElementById返回一个单一的元素。

看看这个:

const changeBgColor = () => {
const elements = document.getElementsByClassName('color-me');
const color = document.querySelector('input').value;
for (let i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = color;
}
};

<p class='color-me'>Color me!</p>
<p>Can't change me..</p>
<p class='color-me'>Me too!</p>
<input type=color />
<button onclick=changeBgColor()>Click Me</button>

Answer 6

function changeColor() {
let cols = document.getElementsByClassName('col1');
for(i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = 'blue';
}
}
//maybe type script gives error about style just use //@ts-ignore

Answer 7

您只是想更改第一个元素的background-color

?喜欢使用querySelector

ES5

function changeBackground(color) {
document.querySelector(".pls-work").style.backgroundColor = color;
}

但是如果你想应用所有元素，使用getElementsByClassName和forEach

function changeBackground(color){
document.getElementsByClassName("pls-work").forEach(e => {
e.style.backgroundColor: color;
});
}

注意:如果你想只修改background color，使用backgroundColor