JavaScript动态创建元素能否通过样式表修改？求非JS内联样式方案

问题 #

前两行元素通过HTML静态创建，第三行元素通过JavaScript动态创建后，样式表的样式未应用到第三行元素。想找到无需在JavaScript中编写内联样式的解决办法。

代码示例 #

HTML

<div class="container">
  <div class="sec1">
      <h1>Data Sheet</h1>

      <div class="table">
          <div class="back">
              <div></div>
              <div></div>
              <div></div>
          </div>
          <div class="records">
              <div class="record">
                  <span class="name">name</span>
              </div>
              <div class="record">
                  <span class="name">name</span>
              </div>
          </div>
      </div>
  </div>
</div>

CSS

.sec1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1{
    margin-block: 10px;
}
.table{
    width: 100%;
    height: 100%;
    /* background: $orange-web; */
    position: relative;
}
.back{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: absolute;
}
.back>div:nth-child(1){
    grid-column: span 2;
}
.back>div:not(:last-child){
    border-right: 2px dashed $gray ;
}
.records{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: scroll;
}
.records>div{
    border-radius: 5px;
    border: 2px solid $gray;
    margin-block: 10px;
    padding: 2px;
}

JavaScript

const record = document.createElement('div')
recordList.append(record)
const name = document.createElement('span')
name.textContent = elements[0].children[0].value
record.append(name)

预览效果 #

解决办法 #

问题根源是动态创建的元素没有添加静态元素对应的CSS类，导致样式规则无法匹配。只需给动态元素添加和静态元素一致的类名，就能复用现有CSS样式，完全无需在JS中编写内联样式。

修改后的JavaScript代码：

const record = document.createElement('div')
// 添加静态元素的record类
record.classList.add('record')
recordList.append(record)
const name = document.createElement('span')
// 添加静态元素的name类
name.classList.add('name')
name.textContent = elements[0].children[0].value
record.append(name)

说明：
静态创建的行容器带有record类，行内名称标签带有name类，你的CSS规则（包括.records>div层级样式）都是基于这些类或结构定义的。动态添加对应类名后，浏览器会自动匹配并应用样式，无需额外编写JS样式代码。

内容的提问来源于stack exchange，提问作者tharindu nilanga