通过编辑文本区域上的文本来编辑CSS?

uujelgoq  于 2022-12-05  发布在  其他
关注(0)|答案(2)|浏览(169)

如何创建一个包含网页样式表的textarea
我想制作一个网页,用户可以通过编辑textarea中的文本来自定义其<style>设置。
以下是我目前所做的工作:在这个代码片段的<textarea>内部是可编辑的文本,我打算让它作为Web页面的样式表,但我不知道如何使它工作。
我做了许多网页搜索寻找解决方案,但找不到有用的帮助,关于这个特定的功能。任何帮助将不胜感激。
第一个

rsaldnfx

rsaldnfx1#

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

  1. document.getElementsByTagName返回一个数组,因此需要使用[0]选择数组的第一个元素。
    1.实际上并没有获得input元素,只是使用了要运行的代码的字符串(例如,要运行代码document.getElementById('input').value,但用引号将其括起来,这样就将其转换为字符串)。
    此更新版本应该可以在以下情况下工作:
    第一个
gpfsuwkq

gpfsuwkq2#

另一种可能是使用内联样式,将显示样式设置为“block”,将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>

这将直接允许用户编辑和更改样式定义的内容,而不直接保存修改。

相关问题