如何使用HTMLID属性设置用JavaScript创建的元素的样式

我尝试用JavaScript创建一个元素，如下所示：

  const h1 = document.createElement("h1");
  h1.textContent = data.name;
  h1.setAttribute("id", "heading");
  window.data.appendChild(h1);

这是我的CSS代码：

#heading{
  padding-right: 100px;
  colour: red;
}

---

元素出现在页面上，因为我有一个从JSON文件获取数据的异步函数，但我看不到元素样式的差异。我似乎在代码中找不到这个问题，因为我也是JavaScript新手。

可能类似的东西应该可以工作：

h1.style.color = "red";
h1.style.paddingRight = "100px";

检查其他特定案例的文档

另外，CSS中的一个好做法是避免使用id作为元素的目标。如果可能，直接使用HTML标记或class

在你的情况下，而不是

h1.setAttribute("id", "heading");

你应该

h1.classList.add("heading");

然后在CSS中（如果需要）

---

可能类似的方法应该会奏效：

h1.style.color = "red";
h1.style.paddingRight = "100px";

检查其他特定案例的文档

另外，CSS中的一个好做法是避免使用id作为元素的目标。如果可能，直接使用HTML标记或class

在你的情况下，而不是

h1.setAttribute("id", "heading");

你应该

h1.classList.add("heading");

然后在CSS中（如果需要）

---

color

而不是

color

。

窗口。数据

未定义

const h1 = document.createElement("h1");
h1.textContent = data.name;
h1.setAttribute("id", "heading");
document.getElementById("content").appendChild(h1);

演示：

---

color

而不是

color

。

窗口。数据

未定义

const h1 = document.createElement("h1");
h1.textContent = data.name;
h1.setAttribute("id", "heading");
document.getElementById("content").appendChild(h1);

演示：

---

我很惊讶

window.data.appendChild（h1）

有效：/document.appendChild（h1）？

document.appendChild（h1）

似乎不起作用。我会看看是否可以创建一个片段。@Jacob你为什么感到惊讶？元素ID会自动转换为

窗口

属性。

颜色

应该是

颜色

我很惊讶

窗口。data.appendChild（h1）

有效：/document.appendChild（h1）？

文档。appendChild（h1）

似乎不起作用。我会看看是否可以创建一个片段。@Jacob你为什么感到惊讶？元素ID将自动转换为

窗口

属性。

颜色

应为

颜色