javascript - 通过在 textarea 上编辑文本来编辑 CSS？

Question

如何制作 textarea里面有网页的样式表？
我想制作一个用户可以自定义其<style> 的网页通过编辑 textarea 中的文本进行设置.
这是我到目前为止所做的；里面<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>

Answer 1

你非常接近，但你的代码有两个问题。

document.getElementsByTagName返回一个数组，因此您需要使用 [0] 选择数组的第一个元素.

你实际上并没有得到输入元素，你只是在使用你想运行的代码字符串(即你想运行代码 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>