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

【问题标题】：How to change the paragraphs color using JS and an onclick button?如何使用 JS 和 onclick 按钮更改段落颜色？
【发布时间】：2019-05-24 18:45:34
【问题描述】：

我正在使用一个按钮来显示我的段落（和我的标题，但我还没有）改变颜色的模式。我可以通过单击此按钮更改页面的背景，但无法更改段落的颜色。请注意，他们分配了一个班级。这是我的 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')">

提前感谢您的帮助！

【问题讨论】：

标签： javascript html button colors onclick

【解决方案1】：

为了改变每个段落的颜色，您可以使用：

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

【讨论】：

非常感谢，它成功了！还有一个问题；我可以同时将它用于多个课程吗？

【解决方案2】：

例如，您可以循环 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>

另一种选择是使用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>

【讨论】：

【解决方案3】：

如果您检查getElementsByClassName 文档，该方法会返回一个可以像数组一样访问的 HTML 集合。试试

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

如果您确信只有一个元素具有这样的类名。（在这种情况下，我建议你使用 id 选择器而不是类名选择器）

编辑：我重新检查了你的代码，觉得.onclick = changeColor很奇怪

【讨论】：

document.getElementsByClassName 返回一个 HTMLCollection 而不是一个数组