时间戳

首页 > 解决方案 > 如何使用 HTML id 属性为使用 JavaScript 创建的元素设置样式

javascript - 如何使用 HTML id 属性为使用 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 新手。

标签： javascriptcss

解决方案

可能这样的事情应该有效：

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

检查其他特定案例的文档 https://www.w3schools.com/jsref/dom_obj_style.asp

此外，CSS 中的一个好的做法是避免使用id定位您的元素。如果可能，直接使用 HTML 标签或类

在你的情况下，而不是

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

你应该

h1.classList.add("heading");

然后在你的 CSS 中（如果需要）

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

推荐阅读