通过编辑文本区域来编辑可编辑的 CSS？

Question

如何制作一个 textarea，使其具有网页内部样式表的样式？

我想要制作一个网页，用户可以通过编辑 textarea 中的文本来自定义其 <style> 设置。

目前为止，我已经在这段代码的 <textarea> 中放置了可编辑的文本，我希望它能够起到网页样式表的功能，但我不确定如何使其正常工作。

我进行了多次网络搜索以寻找解决方案，但没有找到针对此特定功能的有用帮助。任何帮助将不胜感激。

function myFunction() {
  document.getElementsByTagName("style")[0].innerHTML = "document.getElementById('input').value;";
}

<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">p {
font-family: monospace;
font-size: 15px;
}
</textarea>

- Henry

Answer 1

你很接近了，但是你的代码有两个问题。

1. document.getElementsByTagName 返回一个数组，所以你需要使用 [0] 来选择数组的第一个元素。
2. 实际上你没有获取到输入元素，而只是使用了一个代码字符串（也就是说，你想运行代码 document.getElementById('input').value 但你把它放在引号里面，这样就变成了一个字符串）。

以下是更新后的版本，应该可以正常工作：

function myFunction() {
  document.getElementsByTagName("style")[0].innerHTML = document.getElementById('input').value;
}

<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">html {
font-family: monospace;
font-size: 15px;
}
</textarea>

- Tim

Answer 2

另一种可能性是使用内联样式，将显示样式设置为“块”，并将contenteditable属性设置为“true”。 示例：

<div>
  <style style="
      display: block; 
      padding: 0 0.5rem; 
      border: 1px solid black; 
      border-radius: 4px;
      white-space: pre;
      font-family: 'Courier New', Courier, monospace;
      font-size: small;
      " 
      contenteditable="true">
    #myDiv {
      height: 100%;
      --l1: repeating-linear-gradient(-60deg, 
        transparent 0, 
        transparent 5px, 
        rgba(210, 180, 140, 0.5) 0, 
        rgba(210, 180, 140, 0.5) 35px);
      --l0: repeating-linear-gradient(60deg,
        transparent 0, 
        transparent 5px,
        rgba(210, 180, 140, 0.5) 0, 
        rgba(210, 180, 140, 0.5) 35px);
      background: var(--l1), var(--l0);
      }
  </style>
  <div id="myDiv"></div>
</div>

这将直接允许用户编辑和更改样式定义的内容，但没有直接保存修改的可能性。

- dschoni