Javascript更改字体颜色onclick答案

【问题标题】：Javascript change font color onclickJavascript更改字体颜色onclick
【发布时间】：2017-06-19 02:54:26
【问题描述】：

因此，当我单击单选按钮时，我试图更改整个页面的字体颜色，如下所示：

<input type="radio" name="textcol" value="#FOF8FF" onclick = "changeText('#FOF8FF');"> Alice Blue<br>

然后调用这个函数：

function changeText(col) 
    {
        console.log(col);
        console.log(document.getElementsByName('boyo'));
        var abc = document.getElementsByName('boyo');
        for(var i = 0, length = abc.length; i < length; i++)
        {
            abc[i].style.color = col;
        }

}

您知道，在我所有的 h3 和 p 标签（我文档中唯一的文本）中，我给它们取了一个名字“boyo”，如下所示：

<h3 name = "boyo">My favorite food</h3>

但由于某种原因，它什么也没做。我知道它具有正确的元素（我将它们打印到控制台，如您所见），并且没有发生错误，但我的字体颜色没有改变。我到底做错了什么？

编辑：当我将字符串“#80FF08”的值与我传递的值进行比较时（打印出来的值也完全相同），它返回 FALSE 表示它们相等 - 这怎么可能？当我手动设置颜色时，它会起作用。

【问题讨论】：

你需要在你的代码中做非常非常小的改变看到这个stackoverflow.com/questions/41995384/…
是否有理由不能只在定义哪个color:... 属性有效的最高HTML 元素上设置CSS 类？为什么要更改每个单独元素的 style 属性？

标签： javascript jquery html css fonts

【解决方案1】：

如果您将颜色代码#FOF8FF 中的 O 更改为 0，您的代码将正常工作

function changeText(col) {
  console.log(col);
  console.log(document.getElementsByName('boyo'));
  var abc = document.getElementsByName('boyo');
  for (var i = 0, length = abc.length; i < length; i++) {
    abc[i].style.color = col;
  }


}

<input type="radio" name="textcol" value="#FOF8FF" onclick='changeText("#F0F8FF")'>Alice Blue
<br>

<h3 id="colorMe" name="boyo">My favorite food</h3>

【讨论】：

【解决方案2】：

#FOF8FF 不存在将O 更改为0，我添加了不同的颜色代码，它工作正常

function changeText(col) 
    {
        console.log(col);
        console.log(document.getElementsByName('boyo')[0]);
        var abc = document.getElementsByName('boyo')[0].style.color = col;
        
        

}

<h3 name = "boyo">My favorite food</h3>
       <input type="radio" name="textcol" value="#d2d2d2" onclick = "changeText('#d2d2d2');"> Alice Blue<br>

【讨论】：

【解决方案3】：

将颜色更改为其他正常工作的颜色，似乎#FOF8FF 不是有效的十六进制值：

function changeText(color) {
  console.log(color);
  console.log(document.getElementsByName('boyo'));
  var abc = document.getElementsByName('boyo');
  for (var i = 0, length = abc.length; i < length; i++) {
    abc[i].style.color = color;
  }

}

<input type="radio" name="textcol" value="#FOF8FF" onclick="changeText('#33ccff');">Alice Blue
<br>
<h3 name="boyo">My favorite food</h3>

【讨论】：

【解决方案4】：

因为#FOF8FF 不存在，请尝试使用#000 或任何其他颜色代替#FOF8FF。

如果您想更清楚地了解它并检查您的元素并尝试提供颜色：#FOF8FF，它也需要工作。我附上此截图供您参考。

【讨论】：