Question

如何将样式表用于动态创建的元素？如果可能，我该怎么办？会导致性能问题

 //already defined css style for element 
    <style>
    .para1{
    background-color:orange;
    }
    </style>

    <script>
    var para= document.createElement("div");
    para.innerHTML=phone.name[i];
    para.setAttribute("class","para1");
    var element=document.getElementById("one");
    element.appendChild(para);
    </script>

Answer 1

看起来您已经很多了，但是您已经将CSS格式化为使用elements id和JavaScript作为类。

您可以将CSS更改为a class；

.para1{
    background-color:orange;
}

或者将您的JavaScript插入change the id；

para.id = "para1";

Answer 2

您可以使用para.style = "color: red";定义嵌入式CSS。

或者您可以通过以下方式将CSS添加到<style>标记中：

document.querySelector('style').innerHTML += `
#para1 {
    padding: 20px;
}`;

示例：

var para = document.createElement("div");
para.innerHTML = 'Hello';
para.setAttribute("id", "para1");
para.style = "color: red";
var element = document.getElementById("one");
document.querySelector('style').innerHTML += `
#para1 {
  padding: 20px;
  background-color: orange;
}`;
console.log(document.querySelector('style'));
element.appendChild(para);

<style>
  body {
    background-color: skyblue;
  }

</style>
<div id="one"></div>

如何在CSS样式表中为动态创建的元素使用样式？

2 个答案: