时间戳

首页 > 解决方案 > 如何使用 javascript 应用在 textarea 中引入的自定义 css 代码

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

问题描述

我正在制作可以使用 CSS 选择器进行编辑的网站。但是现在我必须创建一个高级部分，用户可以将他们的 CSS 代码放在 textarea 中以手动编辑样式，例如

.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 样式？

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

标签： javascripthtmlcss

解决方案

我假设你添加id="textar"到 textarea

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
});

推荐阅读