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

Question

我正在制作可以使用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和类只是示例，脚本必须接受输入的任何数据，例如.column-mobile、.custom按钮等

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

最好的方法是将所有代码插入到页面的标题中？

Answer 1

我假设您已将id="textar"添加到文本区域

var textArea = document.getElementById("textar");
//To add classes:
textArea.classList.add("className");
//To remove classes:
textArea.classList.remove("className");

其中，classname是您动态需要添加的类。

如果您想在用户在文本区域键入时添加或删除类，您可以执行以下操作：

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