如何使用javascript应用textarea中引入的自定义css代码

我正在制作可以使用CSS选择器编辑的网站。 但是现在我必须做一个高级部分，用户可以将他们的CSS代码放在文本区域中手动编辑样式 比如说

.anyClass {
  text-align: center;
  color: blue;
}

#anyId {
  text-align: center;
  color: red;
}

.anyDiv {
  text-align: center;
  color: yellow;
}

.spacer-line border-primary{
  text-align: center;
  color: red;
  border-color: blue;
}

这些ID和类只是示例，脚本必须接受输入的任何数据，例如.columns mobile、.custom button等

如果输入的数据是javascript中的字符串，如何将其添加到页面以更新css样式

---

最好的方法是将所有代码插入页面的页眉？

我假设您已将

id=“textar”

添加到文本区域

var textArea = document.getElementById("textar");

//To add classes:
textArea.classList.add("className");

//To remove classes:
textArea.classList.remove("className");

其中，

classname

是动态需要添加的类

如果要添加或删除用户在textarea中键入的类，可以执行以下操作：

textArea.addEventListener('change', () => {
    //If you want to add
    textArea.classList.add(textArea.value);

    //Similarly for remove
});

---

但是我需要应用用户通过javascript引入的站点css代码，我的值是string，textarea只是输入组件

textarea.classList.add（string）

其中string是作为值的字符串如果你想添加到其他元素，

otherelement.classList…

。我只是以textArea为例。它适用于所有DOM元素我不想编辑textarea，textarea是代码的输入组件。我想将CSS代码添加到主HTML站点，这就是我要说的