使用 Javascript 更改段落颜色答案

【问题标题】：Changing Paragraph Color With Javascript使用 Javascript 更改段落颜色
【发布时间】：2018-02-24 03:12:32
【问题描述】：

我正在尝试设计一个 JavaScript 程序来更改 HTML 段落的文本颜色。 document.getElementById"id1".style.color = "blue";

在我拥有的 HTML 中：<p id="id1">Test</p>

每当我运行代码时，我都会收到错误消息：Uncaught TypeError: Cannot read property 'style' of null at style 我知道还有其他关于这个问题的文章，但没有一篇文章解决了我的问题。

【问题讨论】：

document.getElementById 是一个function，需要传递一个id 参数。 Javascript 中的参数传递给括号内的函数()。

【解决方案1】：

您的代码在语法上无效。您需要调用getElementById 方法使用括号 并在内部传递参数。尝试使用：

document.getElementById("id1").style.color = "blue";

片段：

基于your comment，您可以使用以下函数来设置传递其id、property 和value 的元素的样式。

function style(id, type, modifier) {
  document.getElementById(id).style[type] = modifier;
}

style("id1", "color", "blue");

&lt;p id="id1"&gt;Paragraph&lt;/p&gt;

现在，关于错误Uncaught TypeError: Cannot read property 'style' of null at style，很明显document.getElementById与传递的id返回null，这意味着没有给定的元素id （或尚未加载）。

【讨论】：

这行得通，但我正在尝试创建一个函数，以便您可以传递参数来填写语句。 function style(bodyid, type, modifier) { if (type == "color") { document.getElementById(bodyid).style.color = modifier; } 然后我从不同的 JavaScript 文件运行该函数，如下所示：style("id1", "color", "blue")
@CadenGrey 这听起来像是一个单独问题的开始。
这个答案仍然失败并出现错误：Uncaught TypeError: Cannot read property 'style' of null at style
document.getElementById("id1").style.color = "blue"; 此代码仍然有效，证明 id 存在并附加到元素。也许在生成元素之前调用了该函数？
我修好了。感谢您的帮助！

【解决方案2】：

您的代码缺少 getElementById 函数的参数周围的括号。像下面的 sn-p 那样添加它们将修复它。

document.getElementById("id1").style.color = "blue";

&lt;p id="id1"&gt;Test&lt;/p&gt;

为您的代码使用提供语法高亮显示的编辑器或 eslint 之类的工具将帮助您发现此类问题。

【讨论】：