如何在JavaScript中使用.getElementsByClassName更改背景顏色？

無論我如何嘗試，我都無法讓它發揮作用。如果我使用.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.

我將不勝感激任何關于我做錯了什么的指示。

uj5u.com熱心網友回復：

呼叫document.getElementsByClassName("pls-work")回傳一個HTMLCollectionof 元素而不是單個元素。您需要遍歷集合并在每個元素上設定 style 屬性。

請參閱JS：使用 Array.forEach 迭代 getElementsByClassName 的結果

uj5u.com熱心網友回復：

該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
    }
}

有關如何迭代此集合的更多資訊，請參閱上面列出的檔案。

uj5u.com熱心網友回復：

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. 迭代特定類的元素并為其添加背景顏色

uj5u.com熱心網友回復：

請試試這個，

首先在變數中獲取該元素并在其上進行回圈。

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

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

你只是想改變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

uj5u.com熱心網友回復：

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

標籤：javascript html css

上一篇：如何在HTML和CSS中制作14x5的單選按鈕網格

下一篇：CSS過渡不起作用，它以前作業過