如何使用JS和onclick按鈕更改段落顏色？

Question

我正在使用一個按鈕來顯示一種模式，在該模式下，我的段落（以及我的標題，但我還沒有到達）改變顏色。 單擊此按鈕可以更改頁面的背景，但是不能更改段落的顏色。 請注意，他們分配了一個類。 這是我的JS頁面上的以下代碼：

function chBackcolor(color) {
   document.body.style.background = color;
};
function changeColor(color) {
   document.getElementsByClassName('forma').onclick = changeColor;
}

這是我在HTML上使用的內容：

`<input type="button" value="Mode Psychédélique" 
     onclick="chBackcolor('magenta'), changeColor('blue')">    

`

在此先感謝您的幫助 ！

Answer 1

例如，您可以循環使用getElementsByClassName返回的HTMLCollection元素，然后使用for / of循環設置顏色：

function changeColor(color) {
  for (let e of document.getElementsByClassName('forma')) {
    e.style.color = color
  }
}

 function chBackcolor(color) { document.body.style.background = color; } function changeColor(color) { for (let e of document.getElementsByClassName('forma')) { e.style.color = color } } 

 <input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')"> <p class="forma">test1</p> <p class="forma">test2</p> <p class="forma">test3</p> 

另一種選擇是使用傳播語法：

function changeColor(color) {
    [...document.getElementsByClassName('forma')].forEach(e => e.style.color = color);
}

 function chBackcolor(color) { document.body.style.background = color; } function changeColor(color) { [...document.getElementsByClassName('forma')].forEach(e => e.style.color = color); } 

 <input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')"> <p class="forma">test1</p> <p class="forma">test2</p> <p class="forma">test3</p> 

Answer 2

如果檢查getElementsByClassName文檔，則該方法將返回HTML集合，該集合可以像數組一樣進行訪問。 嘗試

document.getElementsByClassName('forma')[0].onclick = changeColor;

如果您確信只有一個元素具有此類名稱。 （在這種情況下，建議您使用id選擇器代替類名稱選擇器）

編輯 ：我重新檢查了您的代碼，並覺得.onclick = changeColor很奇怪

Answer 3

為了更改每個段落的顏色，您可以使用：

document.querySelectorAll('.forma').forEach(function(ele) {
     ele.style.color = color;
});

 function chBackcolor(color) { document.body.style.background = color; }; function changeColor(color) { document.querySelectorAll('.forma').forEach(function(ele) { ele.style.color = color; }); } 

 <p class="forma">paragraph1...............</p> <p class="forma">paragraph2...............</p> <p class="forma">paragraph3...............</p> <input type="button" value="Mode Psychédélique" onclick="chBackcolor('magenta'), changeColor('blue')">