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

例如，您可以循环HTMLCollection返回的getElementsByClassName元素，然后使用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>

另一个选择可能是使用spread语法：

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')">

如何使用JS和onclick按钮更改段落颜色？

3 个答案: